uniapp图片上传制作

简介: uniapp图片上传制作

Uniapp 支持多种方式上传图片,以下是其中几种常用方式:

  1. 使用 uni.uploadFile() 上传图片,示例代码:
uni.chooseImage({
    success: function (chooseImageRes) {
        uni.uploadFile({
            url: 'http://example.com/upload',
            filePath: chooseImageRes.tempFilePaths[0],
            name: 'file',
            success: function (uploadFileRes) {
                console.log('upload success')
            },
            fail: function (err) {
                console.log(err)
            }
        })
    }
})
  1. 使用 uni.getImageInfo() 获取图片信息,再使用 uni.request() 上传图片,示例代码:
uni.chooseImage({
    success: function (chooseImageRes) {
        uni.getImageInfo({
            src: chooseImageRes.tempFilePaths[0],
            success: function (getImageInfoRes) {
                uni.request({
                    url: 'http://example.com/upload',
                    method: 'POST',
                    header: {
                        'content-type': 'multipart/form-data'
                    },
                    formData: {
                        file: chooseImageRes.tempFilePaths[0],
                        width: getImageInfoRes.width,
                        height: getImageInfoRes.height
                    },
                    success: function (requestRes) {
                        console.log('upload success')
                    },
                    fail: function (err) {
                        console.log(err)
                    }
                })
            }
        })
    }
})
  1. 使用第三方插件 uni-uploader 上传图片,示例代码:
<template>
    <view>
        <uploader :files="files" :options="options" @complete="onComplete"></uploader>
    </view>
</template>
<script>
    import Uploader from '@/components/uni-uploader/uni-uploader.vue'
    export default {
        components: {
            Uploader
        },
        data () {
            return {
                files: [],
                options: {
                    url: 'http://example.com/upload',
                    method: 'POST',
                    fileType: ['jpg', 'jpeg', 'png', 'gif'],
                    fileName: 'file',
                    formData: {},
                    header: {}
                }
            }
        },
        methods: {
            onComplete ({type, index, file}) {
                if (type === 'add') {
                    this.files.push(file)
                } else if (type === 'remove') {
                    this.files.splice(index, 1)
                } else if (type === 'success') {
                    console.log('upload success')
                } else if (type === 'fail') {
                    console.log('upload fail')
                }
            }
        }
    }
</script>

以上三种方式均可用于上传图片,具体选择哪种方式可以根据自己的需求和开发习惯进行选择。

相关文章
|
2月前
|
小程序 JavaScript
微信小程序图片预览功能?
微信小程序图片预览功能?
|
2月前
|
前端开发
简单的做一个图片上传预览(web前端)
简单的做一个图片上传预览(web前端)
36 0
|
存储 移动开发 小程序
【uniapp小程序】上传图片
【uniapp小程序】上传图片
1132 0
【uniapp小程序】上传图片
|
小程序
UniApp上传图片
小程序大家应该都知道,通过上传组件得到的都是本地的一个临时路径,这个路径是不能被外网访问的,所以我们就需要将拿到的临时路径转成Base64上传到后台服务器。或者说是另外一个办法,就是通过组件直接上传文件,这个看需求设计吧。
314 0
|
11月前
|
小程序 JavaScript 数据库
微信小程序系列——上传下载图片以及图片的展示
微信小程序系列——上传下载图片以及图片的展示
|
12月前
uniapp上传图片
uniapp上传图片
122 0
|
2月前
|
移动开发 小程序
uniapp轮播图制作
uniapp轮播图制作
120 0
|
8月前
|
前端开发 JavaScript
uniapp上传图片至服务器,获得在线图片链接预览(实战)
uniapp上传图片至服务器,获得在线图片链接预览(实战)
340 0
|
10月前
|
小程序 JavaScript
微信小程序 tdesign图片上传组件 上传到服务器
微信小程序 tdesign图片上传组件 上传到服务器
|
11月前
|
小程序
微信小程序 tdesign图片上传组件 上传后端
微信小程序 tdesign图片上传组件 上传后端
318 0