VUE+Element Ui+axios 上传多张图片
VUE+Element Ui+axios上传多张图片这里我们需要取消他的自动上传;在组件里引入axios;multiple是否支持多选文件;auto-upload是否在选取文件后立即进行上传;http-request覆盖默认的上传行为,可以自定义上传的实现如果我们想自己渲染列表的话需要添加show-file-list是否显示已上传文件列表<el-upload v-loading="loadi
·
VUE+Element Ui+axios 上传多张图片
单文件上传:
上传单个文件:https://blog.csdn.net/weixin_47083714/article/details/121285181?spm=1001.2014.3001.5502
这里我们需要取消他的自动上传;在组件里引入axios;
multiple 是否支持多选文件;
auto-upload 是否在选取文件后立即进行上传;
http-request 覆盖默认的上传行为,可以自定义上传的实现
如果我们想自己渲染列表的话需要添加
show-file-list 是否显示已上传文件列表
<el-upload v-loading="loading" element-loading-text="拼命加载中" class="upload-demo" ref="upload" :action="URL" :on-preview="handlePreview" :on-remove="handleRemove"
:file-list="fileList" multiple :http-request="uploadFile"
:on-change="onChange" :auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 20px;" size="small" type="success" @click="submitUpload">上传文件</el-button>
<div slot="tip" class="el-upload__tip" style="font-size: 16px;margin-top: 10px;">文件列表</div>
</el-upload>```
在使用组件内引入axios
import axios from 'axios'
然后我们在data里需要定义
data() {
return {
loading: false,
fileList: [],
URL: process.env.VUE_APP_HTTP_BASE_URL + '上传路径',
headers: {
Token: localStorage.getItem('Token'),
},
};
},
接下来就是涉及到的上传方法了
submitUpload() {
this.loading=true;
if(this.fileList.length <=0){
this.$message.error("文件上传不能为空");
this.loading=false;
}
else{
let formData = new FormData();
this.fileList.forEach(item =>{
formData.append('files',item.raw)
})
formData.append('fileId',this.fileId)
formData.append('claimId',this.claimId)
var url = this.URL;
const config = {
headers: { "Content-Type": "multipart/form-data"
}
};
// const config = headers:{ "Content-Type": "multipart/form-data"
// }
// };
axios.post(url,formData,config)
.then((res) => {
//console.log(res.data);
if(res.data.code == 200){
this.$message({
message: '导入成功',
type: "success",
});
this.loading=false;
this.$emit('g');
//this.$router.go(0)
this.getList()
}else if(res.data.code == 101){
this.$message({
message: 'token失效',
type: "success",
});
this.loading=false;
}
else{
this.$message({
message: '导入失败',
type: "success",
});
this.loading=false;
}
})
.catch(function (error) {
console.log(error);
});
}
},
handleRemove(file, fileList) {
this.fileList = fileList;
console.log(file, fileList);
},
onChange(file, fileList) {
this.fileList = fileList;
console.log(this.fileList);
},
handlePreview(file) {
console.log(file);
}
这样我们的上传多张图片就可以实现了,有说明建议或者是更好的方法,欢迎提出意见。
更多推荐
已为社区贡献2条内容
所有评论(0)