我的vue项目中需要将图片传给后台。
首先：HTML代码：
传给后台有两种方式：
1.form提交
data() {
return {
fileList: [],
dialogVisible:false,
base:"",
files:''
};
},
methods: {
updata(event){
event.preventDefault()
let file=event.target.files[0] //根据事件源找到上传的file
let formData = new FormData();
formData.append('file',files);//键名要和后台一致
const instance=axios.create({
withCredentials: true
})
instance.post('/api/upload?certType=产权证',formData).then(res=>{
console.log(res)
})
}
}
此时控制台的network:
2.直接将文件转成base64
updata(event){
event.preventDefault()
this.files=event.target.files[0]
this.getBase64(this.files).then(res=>{
console.log(res)
})
},
getBase64(file) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function() {
imgResult = reader.result;
};
reader.onerror = function(error) {
reject(error);
};
reader.onloadend = function() {
resolve(imgResult);
};
});
},