Avue

Upload附件上传

//使用上传附件需要引入axios
import axios from 'axios'
const app =createApp({})
app.use(Avue,{axios})

TIP

propsHttp配置请求接口返回的数据结构

  • name图片的名称
  • url路径地址
  • res返回数据层级结构
  • home相对路径的主路径

类型

listType配置上传的类型,multiple是否多选上传

<template>
  <avue-form :option="option"
             v-model="form"></avue-form>
</template>
<script>
let action = 'https://api.avuejs.com/imgupload'
export default {
  data () {
    return {
      form: {
        video: '/i/movie.ogg',
        imgUrl: ["/images/logo-bg.jpg", 'https://www.w3school.com.cn/i/movie.ogg', 'https://www.runoob.com/try/demo_source/horse.mp3'],
      },
      option: {
        column: [
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            multiple: true,
            span: 24,
            propsHttp: {
              url: 'url',
              name: 'name',
              res: 'data'
            },
            action: action
          },
          {
            label: '视频',
            prop: 'video',
            type: 'upload',
            propsHttp: {
              url: 'url',
              name: 'name',
              home: 'https://www.w3school.com.cn'
            },
            listType: 'picture-img',
            span: 24,
            action: action
          },
          {
            label: '照片墙',
            prop: 'imgUrl',
            listType: 'picture-card',
            type: 'upload',
            span: 24,
            action: action
          },
          {
            label: '缩略图上传',
            prop: 'imgUrl',
            type: 'upload',
            span: 24,
            listType: 'picture',
            action: action
          },
          {
            label: '拖拽上传',
            prop: 'imgUrl',
            type: 'upload',
            span: 24,
            dragFile: true,
            action: action
          },
        ]
      }
    }
  }
}
</script>
显示代码

数据类型

TIP

dataType配置数据的结构string、object、json 当dataType配置为object时，可以配置props存储的数据结构

  • label图片的名称
  • value路径地址 当dataType配置为json时，是json序列化字符串,也可以配置props存储的数据结构

dataType可以配置数据的类型

<template>
  <avue-form :option="option"
             v-model="form">
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        array: [{ label: '名称.jpg', value: '/images/logo-bg.jpg' }],
        array1: [{ name: '名称.jpg', url: '/images/logo-bg.jpg' }],
        string: '/images/logo-bg.jpg,/images/logo-bg.jpg',
        json: '[{"label":"名称.jpg","value":"/images/logo-bg.jpg"}]'
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: '数组对象',
            prop: 'array',
            dataType: 'object',
            type: 'upload',
            propsHttp: {
              res: 'data'
            },
            span: 24,
            action: 'https://api.avuejs.com/imgupload'
          },
          {
            label: '数组对象',
            prop: 'array1',
            dataType: 'object',
            type: 'upload',
            props: {
              label: 'name',
              value: 'url'
            },
            propsHttp: {
              res: 'data'
            },
            span: 24,
            action: 'https://api.avuejs.com/imgupload'
          },
          {
            label: '字符串',
            prop: 'string',
            dataType: 'string',
            type: 'upload',
            propsHttp: {
              res: 'data'
            },
            span: 24,
            action: 'https://api.avuejs.com/imgupload'
          },
          {
            label: 'json字符串',
            prop: 'json',
            dataType: 'json',
            type: 'upload',
            propsHttp: {
              res: 'data'
            },
            span: 24,
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  }
}
</script>
显示代码

上传前和上传后方法

upload-before上传前的回调,upload-after上传后的回调

<template>
  <avue-form :option="option"
             v-model="form"
             :upload-before="uploadBefore"
             :upload-after="uploadAfter"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        imgUrl: ['/images/logo-bg.jpg'],
      },
      option: {
        column: [
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-card',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  },
  methods: {
    uploadBefore (file, done, loading, column) {
      console.log(file, column)
      //如果你想修改file文件,由于上传的file是只读文件，必须复制新的file才可以修改名字，完后赋值到done函数里,如果不修改的话直接写done()即可
      var newFile = new File([file], '1234', { type: file.type });
      done(newFile)
      this.$message.success('上传前的方法')
    },
    uploadAfter (res, done, loading, column) {
      console.log(res, column)
      done()
      this.$message.success('上传后的方法')
    }
  }
}
</script>
显示代码

自定义预览方法

配置uploadPreview预览回调方法

<template>
  <avue-form :option="option"
             v-model="form"
             :upload-preview="uploadPreview"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        imgUrl: ["/images/logo-bg.jpg", 'https://www.w3school.com.cn/i/movie.ogg']
      },
      option: {
        column: [
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-card',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  },
  methods: {
    uploadPreview (file, column, done) {
      this.$confirm('是否放大查看图片').then(() => {
        done()//默认执行打开方法
      });
    }
  }
}
</script>
显示代码

自定义删除方法

配置uploadDelete删除回调函数

<template>
  <avue-form :option="option"
             v-model="form"
             :upload-delete="uploadDelete">
  </avue-form>
</template>

<script>
export default {
  data () {
    return {
      form: {
        imgUrl3: ['/images/logo-bg.jpg'],
      },
      option: {
        column: [
          {
            label: '水印头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-card',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  },
  methods: {
    uploadDelete (file, column) {
      console.log(file, column)
      return this.$confirm('这里是自定义的，是否确定移除该选项？');
    },
  }
}
</script>
显示代码

指定文件类型

可以配置fileType来指定文件的类型，一般用于没有后缀格式的地址

<template>
  <avue-form :option="option"
             v-model="form">
  </avue-form>
</template>

<script>
export default {
  data () {
    return {
      form: {
        imgUrl3: 'https://www.runoob.com/try/demo_source/circle1.svg'
      },
      option: {
        column: [
          {
            label: '头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            fileType: 'img',//img/video/audio
            propsHttp: {
              res: 'data'
            },
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  }
}
</script>
显示代码

传参

可以配置data和headers属性作为传递参数

<template>
  <avue-form :option="option"
             v-model="form">
  </avue-form>
</template>

<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            data: {
              a: 1
            },
            headers: {
              b: 1
            },
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  }
}
</script>
显示代码

上传等待文案和按钮文案

可以配置loadText上传等待文案,fileText上传按钮文案,tip提示文案

<template>
  <avue-form :option="option"
             v-model="form"> </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '头像',
            prop: 'imgUrl3',
            type: 'upload',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            fileText: '我是上传按钮',
            loadText: '上传等待文案',
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  }
}
</script>
显示代码

限制文件类型和大小数量

可以配置accept限制格式和limit显示个数以及fileSize限制大小对应参数即可,fileSize对应基础单位为KB

<template>
  <avue-form :option="option"
             v-model="form">
  </avue-form>
</template>

<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '水印头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-card',
            accept: 'image/png, image/jpeg',
            limit: 2,
            fileSize: 10000,
            span: 24,
            propsHttp: {
              res: 'data'
            },
            tip: '只能上传jpg/png用户头像，且不超过10M',
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  }
}
</script>
显示代码

超出上传限制回调

uploadExceed文件超出上传限制回调

<template>
  <avue-form :option="option"
             v-model="form"
             :upload-exceed="uploadExceed"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        imgUrl: ['/images/logo-bg.jpg']
      },
      option: {
        column: [
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-card',
            limit: 1,
            span: 24,
            propsHttp: {
              res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  },
  methods: {
    uploadExceed (limit, files, fileList, column) {
      console.log(limit, files, fileList, column)
      this.$message.error('超出上传限制文件数量')
    }
  }
}
</script>
显示代码

上传失败错误回调函数

限制文件类型和大小数量触发时会调用uploadError上传失败错误回调函数

<template>
  <avue-form :option="option"
             v-model="form"
             :upload-error="uploadError"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        labelWidth: 120,
        column: [
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-card',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  },
  methods: {
    uploadError (error, column) {
      this.$message.success('上传失败回调')
      console.log(error, column)
    }
  }
}

</script>
显示代码

自定义模板

列名的prop加上Type即可自定义内容

<template>
  <avue-form :option="option"
             v-model="form">
    <template #img-type="{file}">
      <span>自定义模板{{file}}</span>
    </template>
  </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        img: ['/images/logo-bg.jpg', 'https://www.w3school.com.cn/i/movie.ogg'],
      },
      option: {
        column: [
          {
            label: '附件上传',
            prop: 'img',
            type: 'upload',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            action: 'https://api.avuejs.com/imgupload'
          }]
      }
    }
  }
}
</script>
显示代码

图片水印

可以配置canvasOption属性去生成水印和压缩图片，

<template>
  <avue-form :option="option"
             v-model="form">
  </avue-form>
</template>

<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '水印头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            canvasOption: {
              text: 'avue',
              ratio: 0.1
            },
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  }
}
</script>
显示代码

拖拽排序

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.org/Sortable/1.10.0-rc2/Sortable.min.js"></script>
{ "img": [ "/images/logo-bg.jpg", "/images/logo-bg.jpg", "./xx/xx.sql" ] }

配置drag属性即可开启拖拽排序

<template>
  {{form}}
  <avue-form :option="option"
             v-model="form"> </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {
        img: ['/images/logo-bg.jpg', '/images/logo-bg.jpg', './xx/xx.sql']
      },
      option: {
        column: [
          {
            label: '数组图片组',
            prop: 'img',
            drag: true,
            type: 'upload',
            propsHttp: {
              res: 'data'
            },
            span: 24,
            listType: 'picture-card',
            action: 'https://api.avuejs.com/imgupload'
          }
        ]
      }
    }
  }
}
</script>
显示代码

阿里云oss上传

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://cdn.staticfile.org/ali-oss/6.10.0/aliyun-oss-sdk.min.js"></script>

//入口处全局配置阿里云的参数
const app =createApp({})
app.use(AVUE, {
  ali: {
    region: 'oss-cn-beijing',
    endpoint: 'oss-cn-beijing.aliyuncs.com',
    stsToken:'',
    accessKeyId: '',
    accessKeySecret: '',
    bucket: 'avue',
  }
})

<template>
  <avue-form :option="option"
             v-model="form"> </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '阿里上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-img',
            canvasOption: {
              text: 'avue',
              ratio: 0.1
            },
            oss: 'ali',
            span: 24
          }
        ]
      }
    }
  }
}
</script>
显示代码

七牛云oss上传

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://avuejs.com/cdn/CryptoJS.js"></script>

//入口处全局配置七牛云的参数 
const app =createApp({})
app.use(AVUE, {
  qiniu: {
    AK: '',//七牛云相关密钥
    SK: '',//七牛云相关密钥
    bucket:'https://upload.qiniup.com'//存储地区，默认为华东，其他的如下表
    scope: 'test',//存储空间名称
    url: 'https://cdn.avuejs.com/'//外链的域名地址
  }
})

<template>
  <avue-form :option="option"
             v-model="form"> </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '七牛上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-img',
            fileType: "img",
            oss: 'qiniu',
            span: 24,
          }
        ]
      }
    }
  }
}
</script>
显示代码

腾讯云oss上传

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://avuejs.com/cdn/cos-js-sdk-v5.min.js"></script>

Vue.use(AVUE, {
  cos: {
    SecretId: '',//腾讯云相关密钥
    SecretKey: '',//腾讯云相关密钥
    Bucket: 'test',//存储空间名称
    Region: 'ap-beijing'//存储地区
  }
})

<template>
  <avue-form :option="option"
             v-model="form"> </avue-form>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      option: {
        column: [
          {
            label: '腾讯上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-img',
            fileType: "img",
            oss: 'cos',
            span: 24
          }
        ]
      }
    }
  }
}
</script>
显示代码
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档