当前位置: 代码迷 >> 综合 >> H5+Vant 上传文件
  详细解决方案

H5+Vant 上传文件

热度:10   发布时间:2023-11-25 16:43:43.0

uploaderImage.js

function upLoaderImg(file, url) { //file为 你读取成功的回调文件信息//new 一个FormData格式的参数let params = new FormData()params.append('file', file)let config = {headers: { //添加请求头'Content-Type': 'multipart/form-data'}}return new Promise((resolve, reject) => {//把 uploadUrl 换成自己的 上传路径axios.post(`/${url}`, params, config).then(res => {resolve(res)}).catch(err => {reject(err)});})
}

Vant

上传图片之后上传服务器


afterRead(file) {upLoaderImg(file.file, 'upload').then(res => {if (res.data.code == 200) {this.imgList.push(res.data.data.new.fullPath)} else {this.$toast.fail(res.data.success)}})
} 

判断图片类型

beforeRead(file) {if (file.type !== 'image/jpeg') {Toast('请上传 jpg 格式图片');return false;}return true;
}

 删除图片  使用截取

beforeDelete(file, index) {this.imgList.splice(index, 1);}

  相关解决方案