Vue+Vant ui实现图片上传
一、首先需要安装Vant ui
npm i vant -S
二、在main.js中引入Vant ui
//引入Vant
import Vant from "vant";
import "vant/lib/index.css"
Vue.use(Vant)
三、具体使用Vant Uploader组件详解
<div>
<p>图片上传</p>
<van-uploader v-model="fileList" :after-read="afterRead" multiple />
</div>
export default{
data(){
retrun{
fileList:[]
}
},
methods:{
afterRead(){
let content = file;
let fromData = new FromData();
if(Array.isArray(content)) {
console.log('file',file)
content.forEach(item => {
formData.append("file",item.file);
});
}else{
formData.append("file", content.file);
}
console.log(content)
//获取formdata表单所有的数据
console.log("formData对象",formData)
console.log('file',formData.getAll("file"));
this.$api.file.uploadimg({
url: 'upload',
files: formData,
}).then(res => {
console.log(res);
console.log("返回地址",res.file);
// this.fileList = res.file;
});
},
}
}