Vue Element-ui el-upload
阿新 • • 發佈:2021-01-12
<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`;
}
},
阿斯達按時打算打算打算大所多按時