Vue Element-ui el-upload
<el-form-item prop="" label="幻灯图">
<el-upload
:name="'attachment'"
:action="uploaderRequestUrl"
list-type="picture-card"
:on-preview="handlePreview"
:before-remove="beforeHandleRemove"
:on-remove="handleRemove"
:headers="uploadHeader"
:on-success="handleSuccess"
:on-error="handleError"
:auto-upload="true"
:before-upload="beforeUpload"
:limit="slideLimit"
:file-list="slideFileList"
:on-exceed="handleExceed"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeHandleRemove(file, fileList) {
return true;
},
handleRemove(file, fileList) {
if (file && file.status === "success") {
this.slideFileList = fileList;
this.form.cover.slide = [];
if (this.slideFileList.length > 0) {
for (let i = 0; i < this.slideFileList.length; i++) {
this.form.cover.slide[i] = this.slideFileList[i].url;
}
}
}
},
beforeUpload(file) {
let limit = 5;
const isLtxM = file.size / 1024 / 1024 < limit;
if (!isLtxM) {
this.$message.error("上传文件大小不能超过" + limit + "MB!");
return false;
}
return true;
},
handleSuccess(res) {
if (res.error !== 0) {
console.log("err");
this.uploadErrorTip(res.message);
} else {
console.log("succ");
this.uploadSuccessTip();
// console.log(res);
let filePath = res.data.file_path;
this.form.cover.slide.push(filePath);
// console.log(this.form.cover.slide);
this.slideFileList = this.form.cover.slide.map(item => {
return {
name: item,
url: item
};
});
// console.log(this.slideFileList);
}
this.listLoading = false;
this.isUploading = false;
},
handleError(res) {
this.uploadErrorTip("上传失败");
this.listLoading = false;
this.isUploading = false;
},
uploadErrorTip(msg) {
this.$message.error(msg);
},
uploadSuccessTip() {
this.$message({
message: "上传成功",
type: "success"
});
},
handleExceed(files, fileList) {
this.$message.warning(`最多可以 ${this.slideLimit} 个文件`);
}
computed: {
uploaderRequestUrl() {
return `${process.env.VUE_APP_BASE_API}remote-upload`;
}
},
阿斯达按时打算打算打算大所多按时