Vue—实现文件上传（多文件），图片上传

一、图片上传
//template
<input
type="file"
accept="image/*"
@change="changeImage()"
ref="avatarInput"
style="display:none"
/>
<div class="pic_list">
<div v-for="(src, index) in imgDatas" :key="index">
<!-- 利用element-ui的图片预览插件 -->
<el-image
style="margin-right: 10px;width: 100px; height: 100px"
:src="src"
:preview-src-list="imgDatas"
>
</el-image>
</div>
<!-- 替换自己的上传图标 -->
<p class="upload_btn" @click="upLoad">＋</p>
</div>
//script
data(){
return {
formData: new FormData(),
imgDatas:[]
}
},
methods:{
changeImage() {
// 上传图片事件
var files = this.$refs.avatarInput[0].files;
var that = this;
if (files.length === 0) {
return;
}
function readAndPreview(file) {
//Make sure `file.name` matches our extensions criteria
if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
var reader = new FileReader();
reader.onload = function(e) {
// 防止重复上传
if (that.imgDatas.indexOf(e.target.result) === -1) {
that.imgDatas.push(e.target.result);
that.formData.append("imgFile", file);
// console.log(that.formData.getAll("imgFile"));
}
};
reader.readAsDataURL(file);
}
}
if (files.length !== 0) {
readAndPreview(files[0]);
}
// console.log(this.formData.getAll("imgFile"));
// 文件上传服务器
// this.setUploadFile()
},
setUploadFile() {
// this.$http
// .post("/api/dxbase/upload?resType=EVENT", this.formData)
// .then(res => {
// console.log(res);
// });
},
upLoad() {
// 触发上传图片按钮
this.$refs.avatarInput[0].dispatchEvent(new MouseEvent("click"));
}
}
//style

.upload_btn {
width: 100px;
height: 100px;
background: #fbfdff;
border: 1px dashed #999;
color: #666;
box-sizing: border-box;
font-size: 40px;
text-align: center;
line-height: 100px;
cursor: pointer;
}

.pic_list {
display: flex;
flex-wrap: wrap;
}

二、文件上传
<el-button @click="choseFile" type="primary"
>选择上传文件</el-button
>
<p>
<span
v-for="(fileItem, fileIndex) in fileData"
:key="fileIndex"
style="font-size:12px;color: #666;padding-left: 10px;"
>{{ fileItem.name + "；" }}</span
>
</p>
<input
id="fileInput"
style="display:none;"
type="file"
@change="addFile"
ref="inputer"
/>
</div>
//script
data(){
return {
formData: new FormData(),
file: {},
fileData: [],
}
},methods:{
choseFile() {
// 选择文件
let fileInput = document.getElementById("fileInput");
fileInput.click();
},
addFile() {
// 添加文件
let inputDOM = this.$refs.inputer[0];
if (inputDOM.files[0]) {
this.file = inputDOM.files[0];
// 防止重复上传
//Make sure `file.name` matches our extensions criteria

var reader = new FileReader();
reader.onload = e => {
// console.log(this.fileData);
// console.log(
// this.fileData.some(v => {
// return v.result !== e.target.result;
// })
// );
if (this.fileData.length == 0) {
this.fileData.push({
name: this.file.name,
result: e.target.result
});
this.formData.append("file", this.file);
// console.log(this.formData.getAll("file"));
} else {
// 防止重复上传
if (
!this.fileData.some(v => {
return v.result == e.target.result;
})
) {
this.fileData.push({
name: this.file.name,
result: e.target.result
});
this.formData.append("file", this.file);
// console.log(this.formData.getAll("file"));
}
}
//this.submitFile();
};
reader.readAsDataURL(this.file);
}
// console.log(this.formData.getAll("file"));
// console.log(this.file)
},
submitFile() {
//this.$http
// .post("/api/dxbase/upload?resType=EVENT", this.formData)
// .then(res => {
// console.log(res);
// });
}
}

参考文章：http://blog.ncmem.com/wordpress/2023/12/11/vue-%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%ef%bc%88%e5%a4%9a%e6%96%87%e4%bb%b6%ef%bc%89%ef%bc%8c%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0/

欢迎入群一起讨论