组件页面
<template>
<view class="upload-wrapper">
<view v-if="pictureUrl.length">
<view class="preview" v-for="(item,index) in pictureUrl" :key='index' >
<view >
</view>
<image :src="`${host}${item.accessFilePath}`" mode="" v-if="item.accessFilePath">
</image>
<image :src="`${host}${item}`" mode="" v-else></image>
<view class="delete" @tap="deleteImg(index)">
</view>
</view>
</view>
<view class="img-wraper" v-if="!(pictureUrl.length ==6)" @tap="choosePicture">
<image :src="image" mode=""></image>
</view>
</view>
</template>
点击添加图片
choosePicture() {
const that = this;
const value = getAuthorization(); //此方法是获取token的方法，按照自己的需求替换
let Authorization = '';
if (value) {
Authorization = value
}
uni.chooseImage({
count: 1, //图库里只能选择一张
sourceType: ['album','camera'], //可以使用相册或者是照相机
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
that.src = tempFilePaths[0] //上传图片的路径，如后续有用可留存
const name = tempFilePaths[0].split('/').pop()
let imgLength = chooseImageRes.tempFilePaths.length
if(chooseImageRes.tempFiles[0].size > 10485760){ //判断是否大于10M 单位是大写B
uni.showToast({
title: '图片大于10MB无法上传',
icon: 'none',
})
return
}
let arr=0
chooseImageRes.tempFiles.forEach((item,index)=>{ //这里我之前的需求是一次可以选择多张，然后把这些都循环成一个数组，后来改了只能选一张，如果需求需要可留存
arr +=item.size
})
if(arr/1024>500){ //判断是否大于500kb 大于500Kb的图片才进行压缩
let promise = new Promise(function(resolve, reject) {
chooseImageRes.tempFilePaths.map((value, index) => {
uni.compressImage({
src: value,
height:"50%",
width:"50%",
quality:1,
success: (res) => {
uni.getFileInfo({ //可以看压缩后的大小留着
filePath:res.tempFilePath,
success:(item)=> {
}
})
that.compressedImgList.push(res.tempFilePath);
if (index == imgLength - 1) {
resolve(that.compressedImgList);
}
},
fail: (err) => {
reject(err)
}
})
})
})
promise.then((res)=>{
uni.uploadFile({
url: `${host}/zhyl/oss/uploadWatermark/jggl/repairPic`, //仅为示例，非真实的接口地址
filePath: res[0], //这个就是地址 压缩前后的地址 that.compressedImgList.push这个是数组地址多个的
name:'file',
// fileName:name,
header: {
"Authorization": getAuthorization()
},
success: (uploadFileRes) => {
if(uploadFileRes.statusCode==200){
const data = JSON.parse(uploadFileRes.data)
let dd=JSON.parse(uploadFileRes.data)
that.pictureUrl.push(dd.data[0].accessFilePath)
that.$emit('uploadImage',dd.data[0])
}
},
fail:(res)=>{
console.log(res);
}
});
})
}else{
that.compressedImgList= chooseImageRes.tempFilePaths //如果不大于500那就是选择时候的图片地址这是个数组
uni.uploadFile({
url: `${host}/zhyl/oss/uploadWatermark/jggl/repairPic`, //仅为示例，非真实的接口地址
filePath:chooseImageRes.tempFilePaths[0] , //这个就是地址 压缩前后的地址 that.compressedImgList.push这个是数组地址多个的
name:'file',
header: {
"Authorization": getAuthorization()
},
success: (uploadFileRes) => {
if(uploadFileRes.statusCode==200){
const data = JSON.parse(uploadFileRes.data)
let dd=JSON.parse(uploadFileRes.data)
that.pictureUrl.push(dd.data[0].accessFilePath)
that.$emit('uploadImage',dd.data[0])
}
},
fail:(res)=>{
console.log(res);
}
});
}
}
});
},
标签：uniapp,const,10m,res,uploadFileRes,tempFilePaths,data,chooseImageRes,图片 From： https://www.cnblogs.com/prince11/p/17847223.html