Vue+Vant ui实现图片上传

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;
     		 });	
		},
	}
}