Vue+Vant ui实现图片上传
Vant 图片上传
1、安装Vant ui npm i vant -S
2、在 main.js 中引入 Vant ui
// 引入vant
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)
< div class = "d_photo" >
< p> 图片上传< / p>
< van- uploader v- model= "fileList" : after- read= "afterRead" multiple / >
< / div>
export default {
data ( ) {
return {
fileList: [ ]
}
} ,
methods: {
afterRead ( file) {
let content = file;
let formData = new FormData ( ) ;
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)
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) ;
} ) ;
} ,
}
}