uni-app上传图片方法封装
uni-app上传图片方法封装function chooseImg(count, success) {console.log(count)uni.chooseImage({count: count,success: res => {// console.log(res)// console.log(res.tempFilePaths)uploadFiles(res.tempFilePaths
·
uni-app上传图片方法封装
function chooseImg(count, success) {
console.log(count)
uni.chooseImage({
count: count,
success: res => {
// console.log(res)
// console.log(res.tempFilePaths)
uploadFiles(res.tempFilePaths,success)
}
})
}
async function uploadFiles(paths,success) {
uni.showLoading({
title: '正在上传'
})
for (let path of paths) {
try {
const uploadData = await uploadFile(path)
console.log(uploadData)
success(uploadData)
} catch(err) {
console.log(err)
uni.showToast({
title:err||'上传失败',
icon:'error',
mask:true
})
break;
}
}
uni.hideLoading()
}
function uploadFile(path) {
return new Promise((resolve, reject) => {
uni.uploadFile({
url: '这里是你们后台的上传接口地址',
filePath: path,
name: 'file',
header: { //(根据自身接口要求选择)
accessToken: uni.getStorageSync('token')
},
formData: { //上传文件的额外参数(根据自身接口要求选择)
type: 1
},
success: res => {
console.log('上传文件', res)
const imgRes=JSON.parse(res.data)
if(imgRes.code==200){
resolve(imgRes.data)
}else{
reject('上传失败');
}
},
fail: () => {
reject('网络错误');
}
});
})
}
module.exports = {
uploadImg: chooseImg,
}
可以全局注册也可以单独引用,我这里是全局注册
import upLoad from "@/utils/upload";
Vue.prototype.$upload = upLoad;
然后是调用
// 这是单张图片上传
this.$upload.uploadImg(1,res=>{
//res就是图片地址
this.img = res
})
// 这是多张图片上传
this.$upload.uploadImg(3,res=>{
//res就是图片地址
this.imgArr.push(res)
})
更多推荐
已为社区贡献2条内容
所有评论(0)