当前位置: 首页 > 工具软件 > Image Cube > 使用案例 >

【vue】移动端通过cube-ui实现图片上传

胡越
2023-12-01

「Pre」cube-ui的安装

POST:https://blog.csdn.net/dangbai01_/article/details/84935882

  

一、普通上传

 

<cube-upload

    action="//目标地址"

    :simultaneous-uploads="1"

    @files-added="filesAdded"

    style="padding-left:15px" />

 

 

  methods: {

    filesAdded(files) {

      let hasIgnore = false

      const maxSize = 1 * 1024 * 1024 // 1M

      for (let k in files) {

        const file = files[k]

        if (file.size > maxSize) {

          file.ignore = true

          hasIgnore = true

        }

      }

    hasIgnore && this.$createToast({

        type: 'warn',

        time: 1000,

        txt: 'You selected >1M files'

      }).show()

    },

}

 

配置 action 表示上传的 URL 地址,而 simultaneous-uploads 则表示支持的并发上传个数。

通过 files-added 事件可以实现文件过滤,设置 file.ignore = true 即可。

 

 

 

二、普通的压缩上传

多了一个压缩图片的属性

:process-file="processFile"

和一个压缩图片的方法:

 

    processFile(file, next) {

      compress(file, {

        compress: {

          width: 1600,

          height: 1600,

          quality: 1

        }

      }, next)

    },

 

compress方法用的是鹅厂的,下边的base64上传也要用,命名是image.js,

文件内容我放到自己github里了:

POST:https://github.com/canwhite/QCVueTest/blob/master/image%20compress/image.js

项目中,我是在src里边,建了个modules文件夹放进去了/src/modules/image

引入(结合自己的组件位置):

import compress from '../modules/image'

 

 

三、压缩之后base64上传

 

<cube-upload

  ref="upload"

  :action="action"

  :simultaneous-uploads="1"

  :process-file="processFile"

  @file-submitted="fileSubmitted"

  style = "padding-left:15px"

   />

 

 

data(){

    return{

      action: {

        target: ‘//目标地址',

        prop: 'base64Value'

      }

    }

}

methods: {

    processFile(file, next) {

      compress(file, {

        compress: {

          width: 1600,

          height: 1600,

          quality: 1

        }

      }, next)

    },

    fileSubmitted(file) {

      file.base64Value = file.file.base64

    },

}

 类似资料: