uiapp 上传图片

简介: uiapp 上传图片

Upload 上传 | uv-ui 是全面兼容多端、vue2、vue3、nvue的uni-app生态框架 (uvui.cn)

插件链接

DCloud 插件市场

<template>
  <uv-upload
    :fileList="fileList1"
    name="1"
    multiple 
    :maxCount="10"
    @afterRead="afterRead" 
    @delete="deletePic" 
  ></uv-upload>
</template>
<script>
  export default {
    data() {
      return {
        fileList1: []
      }
    },
    methods: {
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
        let lists = [].concat(event.file)
        let fileListLen = this[`fileList${event.name}`].length
        lists.map((item) => {
          this[`fileList${event.name}`].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${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: 'success',
            message: '',
            url: result
          }))
          fileListLen++
        }
      },
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: 'http://192.168.2.21:7001/upload', // 仅为示例,非真实的接口地址
            filePath: url,
            name: 'file',
            formData: {
              user: 'test'
            },
            success: (res) => {
              setTimeout(() => {
                resolve(res.data.data)
              }, 1000)
            }
          });
        })
      }
    }
  }
</script>
目录
相关文章
|
5月前
|
PHP 数据安全/隐私保护
ueditor上传图片添加水印
博客在上传图片的时候,我希望能打上我博客链接的水印,掘金,csdn都是这么干的,这事我得学习。 平时的图片上传还好说,在文章编辑的时候,使用ueditor上传图片加水印需要修改ueditor部分PHP的源码,我这里大概记录一下。 首先打开php文件夹下的Uploader.class.php
29 0
|
存储 NoSQL 前端开发
一文搞定图片选择及图片上传
本篇介绍了在 Flutter 中如何选择图片文件,图片选择组件的封装和如何将图片上传到后台。通过本篇,可以了解Flutter 构建应用时的图片上传过程。
797 0
图片上传预览
     最近做需求时遇到的,上传的时候预览一下,一开始并没有想着用插件什么的,太复杂,只是个预览效果,不如自己写省事。前前后后也就几十行代码(包含头尾HTML、注释、输出调试),反正是比引用插件少多了,自己写也是个锻炼。
788 0
|
Web App开发 JavaScript 内存技术
|
Web App开发 JavaScript 前端开发