Element-uiマルチファイルアップロード削除を実現
11537 ワード
Element-uiマルチファイルアップロード削除を実現
1,
直接コードを貼りました
html
js
この文章があなたを助けてくれることを願っています.
1,
element-ui
のUploadを使用してコンポーネントをアップロード直接コードを貼りました
html
<div class="addFile">
<el-upload
action
multiple
:on-remove="handleRemove" //
:http-request="handleChange" //
:file-list="handleFileList" // list
:on-change="handleChangeStatus"
>
<el-button size="small" type="primary"> </el-button>
</el-upload>
</div>
js
data(){
retrun {
arr:[], //
handleFileList: [], //
}
}
//
handleRemove(file, fileList) {
this.arr = [];
// ,
this.handleFileList = fileList;
fileList.forEach((item) => {
// fileList
this.getUpload(item.raw);
});
},
//
getUpload(file) {
let formData = new FormData();
formData.append("source", file);
this.$axios({
method: "post",
url: "/api/**/****", //
data: formData,
}).then((res) => {
if (res.data.status == 1) {
let url = res.data.url; // url
this.arr.push(url); // push
this.$message.success(" !");
}
});
},
//
handleChange(param) {
let formData = new FormData();
formData.append("source", param.file);
// formData
this.$axios({
method: "post",
url: "/api/**/****",
data: formData,
}).then((res) => {
if (res.data.status == 1) {
let url = res.data.url; // url
this.arr.push(url); //push
this.$message.success(" !");
}
});
},
この文章があなたを助けてくれることを願っています.