uniapp上传图片全面解析

一、uniapp上传图片API

uniapp提供了方便易用的API进行图片上传操作，主要包括两种方法：uni.chooseImage()和uni.uploadFile()

• uni.chooseImage()用于从相机和相册选择图片，并返回临时文件路径列表。
• uni.uploadFile()用于将选择的图片文件上传到服务器。

// 从相册中选择图片
uni.chooseImage({
    count: 1, //选择图片的数量，默认9
    sizeType: ['compressed'], //原图、压缩图或者两者都有，可以指定原图或压缩图，默认两者都有
    sourceType: ['album'], //从相册选择
    success: function(res) {
        const tempFilePaths = res.tempFilePaths; // 返回选定照片的本地文件路径列表
    }
})

// 上传图片到服务器
uni.uploadFile({
    url: 'http://example.com/upload',
    filePath: 'tempFilePaths[0]',
    name: 'file',
    formData: {
        'user': 'test'
    },
    success: function(res) {
        console.log('上传成功');
    }
})

二、uniapp前端图片上传

在uniapp中实现前端图片上传，可以使用第三方插件或者自己编写组件。下面是一个简单的使用uni.uploadFile()进行图片上传的示例：

  

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    upload() {
        const vm = this;
        uni.chooseImage({
            success: function (res) {
                vm.imageUrl = res.tempFilePaths[0]; // 显示选择的图片
                uni.uploadFile({
                    url: 'http://example.com/upload',
                    filePath: vm.imageUrl,
                    name: 'file',
                    header: {'content-type': 'multipart/form-data'},
                    success: function(res) {
                        console.log('上传成功');
                    }
                });
            }
        });
    }
  }
}
</script>

三、uniapp图片压缩上传

为了避免上传大图造成网络传输慢，可以使用图片压缩来减小文件大小。uniapp中使用uni.compressImage()方法进行图片压缩，并且支持设置以下参数：

• src：图片的地址。
• quality：压缩质量，范围为0-100。
• destinationType：压缩后的图片格式，默认为jpg。

uni.chooseImage({
    success: function (res) {
        uni.compressImage({
            src: res.tempFilePaths[0],
            quality: 50,
            success: function (res) {
                const tempFilePath = res.tempFilePath;
                uni.uploadFile({
                    url: 'http://example.com/upload',
                    filePath: tempFilePath,
                    name: 'file',
                    header: {'content-type': 'multipart/form-data'},
                    success: function(res) {
                        console.log('上传成功');
                    }
                });
            }
        })
    }
})

四、uniapp后端图片上传

uniapp通常与后端服务一起使用，可以使用axios或uni.request等网络请求库上传图片到后端。将图片数据放在formData中上传即可。

uni.chooseImage({
    success: function (res) {
        uni.compressImage({
            src: res.tempFilePaths[0],
            quality: 50,
            success: function (res) {
                const formData = new FormData();
                formData.append('file', res.tempFilePath);
                uni.request({
                    url: 'http://example.com/upload',
                    method: 'POST',
                    data: formData,
                    header: {'content-type': 'multipart/form-data'},
                    success: function(res) {
                        console.log('上传成功');
                    }
                });
            }
        })
    }
})

五、uniapp图片上传组件

uniapp提供了uni-upload组件，可以快速实现图片上传的功能。该组件支持多文件上传和图片预览功能。

  

<script>
export default {
    methods: {
        upload(files) {
            console.log('文件列表：', files);
            // TODO: 将文件上传到服务器
        }
    }
}
</script>

六、uniapp图片上传后返回首页

在上传图片完成后，需要跳转回主页，可以使用uni.reLaunch方法跳转回主页。

uni.chooseImage({
    success: function (res) {
        uni.compressImage({
            src: res.tempFilePaths[0],
            quality: 50,
            success: function (res) {
                const tempFilePath = res.tempFilePath;
                uni.uploadFile({
                    url: 'http://example.com/upload',
                    filePath: tempFilePath,
                    name: 'file',
                    header: {'content-type': 'multipart/form-data'},
                    success: function(res) {
                        console.log('上传成功');
                        uni.reLaunch({
                            url: '/pages/index/index'
                        });
                    }
                });
            }
        })
    }
})

七、uniapp图片上传POST请求

uniapp中使用uni.request方法进行POST请求，将文件数据放在formData中。

uni.chooseImage({
    success: function (res) {
        uni.compressImage({
            src: res.tempFilePaths[0],
            quality: 50,
            success: function (res) {
                const formData = new FormData();
                formData.append('file', res.tempFilePath);
                uni.request({
                    url: 'http://example.com/upload',
                    method: 'POST',
                    data: formData,
                    header: {'content-type': 'multipart/form-data'},
                    success: function(res) {
                        console.log('上传成功');
                    }
                });
            }
        })
    }
})

八、uniapp只用拍照形式上传图片

如果只需要使用拍照功能上传图片，可以使用uni.chooseImage方法设置拍照模式。

uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['camera'], // 只使用相机拍照
    success: function (res) {
        const tempFilePaths = res.tempFilePaths;
        uni.uploadFile({
            url: 'http://example.com/upload',
            filePath: tempFilePaths[0],
            name: 'file',
            header: {'content-type': 'multipart/form-data'},
            success: function(res) {
                console.log('上传成功');
            }
        });
    }
})