一、文件上传
- 基本页面
<template>
<div>
<!-- action上传地址 -->
<el-upload
action="http://localhost/goods-service/goods/sku/file"
list-type="picture-card"
:on-success="handleImageSuccess"
:before-upload="beforeImageUpload"
:auto-upload="true"
>
<!-- 十字图标 -->
<i slot="default" class="el-icon-plus"></i>
<!-- 文件 -->
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt />
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
<i class="el-icon-download"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
</div>
</template>
<script>
import { fileDelete,fileDownload } from "@/api/goods/fileUpload.js";
import { unescape } from "querystring";
export default {
data() {
return {
fileList: [],
dialogImageUrl: "",
dialogVisible: false,
disabled: false
};
},
methods: {
handleRemove(file) {
// 删除文件
console.log(file.response.data);
let fileNames = file.response.data.split("/");
fileDelete(fileNames[fileNames.length - 1]).then(res => {
if (res.data.code == "0000") {
this.fileList.splice(file, 1);
}
});
},
handlePictureCardPreview(file) {
// 预览文件
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handleDownload(file) {
console.log("下载成功");
let fileNames = file.response.data.split("/");
let fileName = fileNames[fileNames.length - 1];
fileDownload(fileName).then(res => {
if (res.data.code == "0000") {
this.downloadFile(fileName,res.data.data);
}
});
},
handleImageSuccess(res, file, fileList) {
// 上传成功
this.fileList = fileList;
console.log("上传成功" + fileList.length);
},
beforeImageUpload(file) {
// 上传前格式与大小校验
const isJPG = file.type === "image/jpeg";
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error("上传头像图片只能是 JPG 格式!");
}
if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!");
}
return isJPG && isLt2M;
},
// 下载
downloadFile(fileName, content) {
let aLink = document.createElement("a");
let blob = this.base64ToBlob(content); //new Blob([content]);
let evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
// aLink.dispatchEvent(evt);
aLink.click();
},
// base64转blob
base64ToBlob(code) {
let parts = code.split(";base64,");
let contentType = parts[0].split(":")[1];
let raw = window.atob(parts[1]);
let rawLength = raw.length;
let uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: contentType });
}
}
};
</script>
- 自定义上传
页面添加:http-reques属性：
action属性必须存在，可以为空值。
action
:http-request="fileUpload"
JS调用：
// 一定要添加file默认参数
fileUpload(file) {
fileUpload(file).then(res => {
console.log(res)
});
}
API调用：
/**
* 自定义上传
* @param {*} fileobj
*/
export function fileUpload(fileobj){
let param = new FormData();
// 上传文件对象 名称file与后台控制器参数要一致
param.append('file',fileobj.file);
return request({
method: 'post',
// 上传地址
url: '/goods-service/goods/sku/file',
// 定义上传头
headers: {'Content-Type':'multipart/form-data'},
data: param
});
}
