Uniapp 压缩图片并上传

<w-compress ref='wCompress' />
<u-upload accept="image" id="upload" width="150" height="150" style="margin-left: 40rpx;"
:previewFullImage="true" :headers="headers" :fileList="fileList1" @afterRead="afterRead"
@delete="deletePic" name="1" multiple :maxCount="6">
</u-upload>
import {deleteImg} from '@/api/xxx.js';
data() {
      return {
        fileList1:[],//存放图片的列表
        ImageId: [], //存放所有图片的id
      }          
}
methods:{
    // 删除图片
    deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
        let idArr = []; //存储删除图片的id值,保存到数组中
        deleteImg(Array(this.ImageId[event.index])).then(res => {
            console.log(res);
            this.ImageId.splice(event.index, 1);
            console.log(this.ImageId)
        }).catch(res => {
            console.log(res);
        })
    },

    //压缩图片
    async compress(files) { //图片压缩并上传
    console.log(files)
        const that = this
        let compressFile = []
        //循环压缩并上传
        await that.$refs.wCompress.start(files, { //调用压缩组件方法
                // pixels: 630000,  // 最大分辨率,默认二百万
                quality: 0.8, // 压缩质量,默认0.8     
                base64: false, // 是否返回base64,默认false,非H5有效
            })
            .then(res => {
                 this.uploadFilePromise(res) //调用上传方法
            })
            .catch(e => {
                console.log(e)
            })

    },


    // 新增图片
    async afterRead(event) {
        console.log(event)
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
            this[`fileList${event.name}`].push({
                ...item,
                status: 'uploading',
                message: this.$t("Shopping.productImgUploading")
            })
        })

        for (let i = 0; i < lists.length; i++) {
            await this.compress(lists[i].url);
            let item = this[`fileList${event.name}`][fileListLen]
            this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                status: 'success',
                message: '',
            }))
            fileListLen++
        }
    },
    //每新增一张图片,向后台获取一个id值
     async uploadFilePromise(url) {
         await new Promise((resolve, reject) => {
            let a = uni.uploadFile({
                url: config.baseUrl + '/system/oss/upload', // 仅为示例,非真实的接口地址
                filePath: url,
                name: 'file',
                header: {
                    "Authorization": "Bearer " + getToken()
                },
                success: (res) => {
                    var data =  JSON.parse(res.data);
                    this.ImageId.push(data.data.ossId);
                    resolve(res.data.data)
                }
            });
        })
    },
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值