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>

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

相关文章
|
7月前
|
存储 开发框架 JavaScript
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
506 0
|
7月前
|
小程序 搜索推荐
uniapp中如何使用image图片
uniapp中如何使用image图片
1542 0
|
缓存 移动开发 JavaScript
uniapp H5 公众号微信自定义分享qq,微信带图片标题内容
uniapp H5 公众号微信自定义分享qq,微信带图片标题内容
1033 0
uniapp H5 公众号微信自定义分享qq,微信带图片标题内容
|
移动开发 小程序
(简单详细)uniapp实现自定义海报内容并生成海报二维码图片(可拖拽,可调节大小)
(简单详细)uniapp实现自定义海报内容并生成海报二维码图片(可拖拽,可调节大小)
1110 0
(简单详细)uniapp实现自定义海报内容并生成海报二维码图片(可拖拽,可调节大小)
|
2月前
|
移动开发 小程序
UniApp+uView实现图片上传返回Base64
UniApp+uView实现图片上传返回Base64
75 0
|
4月前
|
小程序 前端开发
|
5月前
|
存储
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
uniapp实战 -- 个人信息维护(含选择图片 uni.chooseMedia,上传文件 uni.uploadFile,获取和更新表单数据)
177 2
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的图片推荐系统附带文章源码部署视频讲解等
52 0
|
7月前
uniapp下载图片到本地
uniapp下载图片到本地
107 0
|
7月前
|
开发框架 JavaScript 小程序
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码

热门文章

最新文章