-- 创造无限可能

uniapp uview上传图片

2023-12-05 14:18:38
1412 人浏览 0 人点赞
有用,点赞支持一下

##### 第一种,点击按钮选择图片上传

<div class="avatar">
    <image mode="" :src="data.profilePhoto || '../../static/index/1.jpg'"></image>
    <text class="avatar-btn" @click="chooseImage">点击上传头像</text>
</div>


    // 选择头像
        chooseImage() {
          uni.chooseImage({
            count: 1, // 最多选择的图片数量,可以根据需求修改
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: (res) => {
              // 选择图片成功
              const tempFilePaths = res.tempFilePaths

              this.uploadAvatar( tempFilePaths[0])
            },
            fail: (err) => {
              // 选择图片失败
              console.log('选择图片失败:', err.errMsg);
            }
          })
        },
        // 上传头像
        uploadAvatar(avatar) {
          console.log('上传文件地址: ', avatar)
          uni.uploadFile({
            url: this.action, //修改成自己的接口地址
            filePath: avatar,
            name: 'file',
            header: {
              'Content-Type': 'multipart/form-data',
              'Authorization': 'Bearer ' + token.getToken('token') // 设置你需要的自定义请求头
            },
            formData: {
              // 可以添加额外的表单数据
            },
            success: res => {
              const data = JSON.parse(res.data)
              this.data.profilePhoto = data.data.url
            },
            fail: err => {

              console.log('上传失败', err)
              this.user = uni.getStorageSync('user')
            }
          })
        },

第二种,upload上传

<div class="block">
    <u-upload
    :fileList="fileList"
    @afterRead="afterRead"
    @delete="deletePic"
    name="3"
    multiple
    :maxCount="10"
    :previewFullImage="true"
    ></u-upload>
</div>


        // 删除图片
        deletePic(event) {
            this.fileList.splice(event.index, 1)
        },
        // 新增图片
        async afterRead(event) {
            // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
            let lists = [].concat(event.file)
            let fileListLen = this.fileList.length
            lists.map((item) => {
                this.fileList.push({
                    ...item,
                    status: 'uploading',
                    message: '上传中'
                })
            })
            for (let i = 0; i < lists.length; i++) {
                const result = await this.uploadFilePromise(lists[i].url)
                let item = this.fileList[fileListLen]
                this.fileList.splice(fileListLen, 1, Object.assign(item, {
                    status: 'success',
                    message: '',
                    url: result
                }))
                fileListLen++
            }
        },
        uploadFilePromise(url) {
            return new Promise((resolve, reject) => {
                let a = uni.uploadFile({
                    url: this.action,  //修改成自己的接口地址
                    filePath: url,
                    name: 'file',
                    formData: {

                    },
                    success: (res) => {
                        const data = JSON.parse(res.data)
                        this.fileListImg.push(data.data.url)
                    }
                });
            })
        },