更新记录

1.0.9(2023-11-03)

添加resize方法

1.0.8(2023-10-30)

修改app端返回参数

1.0.7(2023-09-13)

修复微信小程序图片宽度问题

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

as-upload

图片上传组件

API

Props

属性名 说明 类型 默认值
value(v-model) 图片数据 array []
disabled 是否禁用, 1.0.2 版本新增 boolean false
gutter 图片间距 number 16
column 每行显示图片个数 number 3
imageMode 图片显示方式:同原生image组件 string aspectFill
urlKey 图片数据中的 url 键名 string url
idKey 图片数据中的 id 键名 string id
disablePreivew 禁用预览 boolean false
limit 最大上传数量限制 number 9
showDelete 是否显示删除按钮, 1.0.2 版本移除 boolean false
showSelect 是否显示新增按钮, 1.0.2 版本移除 boolean false
sourceType album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项 array ["album", "camera"]
sizeType original 原图,compressed 压缩图,默认二者都有 array ["original", "compressed"]
extension 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。 array -

Events

事件名 说明 回调参数
input 图片数据发生变化 图片列表
onDelete 删除 删除的图片元素
onChooseImage 图片上传方法 function

onChooseImage

  <template>
     <as-upload1
          v-model="fileList"
          :limit="3"
          @onChooseImage="uploadImage"
        >
     </as-upload1>
  </template>
    uploadImage(files){
        files.forEach(file => {
            upload({
                url: '/file/upload',
                filePath: file.tempFilePath
            }).then(res => {
                // 上传成功后需要自行push图片
                this.formData.fileList.push(res);
            })
        })
    }

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问