Avue

# 附件上传

TIP

  • 如果你想修改file文件,由于上传的file是只读文件，
  • 必须复制新的file才可以修改名字，完后赋值到done函数里
  • 如果不修改的话直接写done()即可,可以参考uploadBefore函数
  • 阿里云和七牛云同理使用
  • 你也可以直接单独配置到column中
//使用上传附件需要引入axios
import axios from 'axios'
Vue.use(Avue,{axios})

# 类型

propsHttp配置请求接口返回的数据结构name和url,props和字典用法一致配置存储时候的label和value,如果返回相对路径可以配置home为图片的主域名

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

<script>
export default{
  data() {
    return {
      form: {
          video:'/i/movie.ogg',
          imgUrl:[
            { "label": "avue@226d5c1a_image.png", "value": "/images/logo-bg.jpg" },
            {"label": "avue@226d5c1a_video.png", "value": 'https://www.w3school.com.cn/i/movie.ogg'}
          ],
          imgUrl5:[
            { "label": "avue@226d5c1a_image.png", "value": "/images/logo-bg.jpg" },
            {"label": "avue@226d5c1a_video.png", "value": 'https://www.w3school.com.cn/i/movie.ogg'}
          ],
          imgUrl3:'/images/logo-bg.jpg'
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            loadText: '附件上传中，请稍等',
            span: 24,
            propsHttp: {
              url:'url',
              name:'name',
              res: 'data'
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/imgupload'
          },
          {
            label: '视频',
            prop: 'video',
            type: 'upload',
            accept:"video/mp4",
            propsHttp: {
              url:'url',
              name:'name',
              home: 'https://www.w3school.com.cn'
            },
            listType: 'picture-img',
            span: 24,
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/imgupload'
          },
          {
            label: '头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              url:'url',
              name:'name',
              res: 'data'
            },
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/imgupload'
          },
          {
            label: '照片墙',
            prop: 'imgUrl4',
            type: 'upload',
            span: 24,
            listType: 'picture-card',
            tip: '只能上传jpg/png文件，且不超过500kb',
            propsHttp: {
              url:'url',
              name:'name',
              res: 'data'
            },
            action: '/imgupload'
          },
          {
            label: '拖拽上传',
            prop: 'imgUrl5',
            type: 'upload',
            span: 24,
            dragFile: true,
            propsHttp: {
              url:'url',
              name:'name',
              res: 'data'
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/imgupload'
          },
          {
            label: '缩略图上传',
            prop: 'imgUrl6',
            type: 'upload',
            limit: 3,
            span: 24,
            propsHttp: {
              url:'url',
              name:'name',
              res: 'data'
            },
            listType: 'picture',
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  }
}
</script>
Expand Copy

# 执行方法

提供了各种吩咐的回调函数和执行方法

<avue-form :option="option" v-model="form" :upload-preview="uploadPreview" 
:upload-error="uploadError" :upload-exceed="uploadExceed" :upload-delete="uploadDelete" :upload-before="uploadBefore" :upload-after="uploadAfter"></avue-form>

<script>
export default{
  data() {
    return {
      form: {
          imgUrl:[
            { "label": "avue@226d5c1a_image.png", "value": "/images/logo-bg.jpg" },
            {"label": "avue@226d5c1a_video.png", "value": 'https://www.w3school.com.cn/i/movie.ogg'}
          ],
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            listType: 'picture-card',
            loadText: '附件上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  },
  methods: {
    uploadDelete(column,file) {
      console.log(column,file)
      return this.$confirm(`这里是自定义的，是否确定移除该选项？`);
    },
    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('上传前的方法')
    },
    uploadError(error, column) {
      this.$message.success('上传失败')
      console.log(error, column)
    },
    uploadAfter(res, done, loading,column) {
      console.log(res,column)
      done()
      this.$message.success('上传后的方法')
    },
    uploadPreview(file,column,done){
      console.log(file,column)
      done()//默认执行打开方法
      this.$message.success('自定义查看方法,查看控制台')
    },
    uploadExceed(limit, files, fileList, column){
      console.log(limit, files, fileList, column)
      this.$message.success('自定义查看方法,查看控制台')
    },
    submit() {
      this.$message.success('当前数据' + JSON.stringify(this.form))
    }
  }
}
</script>
Expand Copy

# 删除回调

配置onRemove图片删除回调函数

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

<script>
export default{
  data() {
    return {
      form: {
        imgUrl3:['/images/logo-bg.jpg'],
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: '水印头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-card',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            onRemove:(file,fileList)=>{
              this.$message.success('图片删除回调')
            },
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  }
}
</script>
Expand Copy

# 传参

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

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

<script>
export default{
  data() {
    return {
      form: {},
      option: {
        labelWidth: 120,
        column: [
          {
            label: '水印头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            data:{
              a:1
            },
            headers:{
              b:1
            },
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  }
}
</script>
Expand Copy

# 上传等待文案

可以配置loadText上传等待文案

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

<script>
export default{
  data() {
    return {
      form: {},
      option: {
        labelWidth: 120,
        column: [
          {
            label: '头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            loadText:'上传等待文案',
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  }
}
</script>
Expand Copy

# 限制文件类型和大小数量

可以配置accept和limit以及fileSize对应参数即可,fileSize对应基础单位为M

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

<script>
export default{
  data() {
    return {
      form: {},
      option: {
        labelWidth: 120,
        column: [
          {
            label: '水印头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-card',
            accept:'image/png, image/jpeg',
            limit:2,
            fileSize:10,
            span: 24,
            propsHttp: {
              res: 'data'
            },
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  }
}
</script>
Expand Copy

# 自定义卡槽

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

<avue-form :option="option" v-model="form"> 
  <template slot="imgUrlType" slot-scope="{file}">
    <span>自定义卡槽{{file}}</span>
  </template>
</avue-form>

<script>
export default{
  data() {
    return {
      form: {
          imgUrl:[
            { "label": "avue@226d5c1a_image.png", "value": "/images/logo-bg.jpg" },
            {"label": "avue@226d5c1a_video.png", "value": 'https://www.w3school.com.cn/i/movie.ogg'}
          ],
      },
      option: {
        labelWidth: 120,
        column: [
          
          {
            label: '附件上传',
            prop: 'imgUrl',
            type: 'upload',
            loadText: '附件上传中，请稍等',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/imgupload'
          }]
      }
    }
  }
}
</script>
Expand Copy

# 数据类型

提供了dataType参数可以去配置存到数据库的结构体类型,也可配props和propsHttp属性去加载不用的结构体中的key和value

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

<script>
export default{
  data() {
    return {
      form: {
          string:'/images/logo-bg.jpg,/images/logo-bg.jpg',
          img:['/images/logo-bg.jpg','/images/logo-bg.jpg','./xx/xx.sql']
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: '数组图片组',
            prop: 'img',
            dataType: 'array',
            type: 'upload',
            propsHttp: {
              res: 'data.0'
            },
            span: 24,
            listType: 'picture-card',
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/imgupload'
          },
          {
            label: '字符串图片组',
            prop: 'string',
            dataType: 'string',
            type: 'upload',
            propsHttp: {
              res: 'data'
            },
            span: 24,
            listType: 'picture-card',
            tip: '只能上传jpg/png文件，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  }
}
</script>
Expand Copy

# 图片水印

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

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

<script>
export default{
  data() {
    return {
      form: {
          imgUrl3:'/images/logo-bg.jpg',
      },
      option: {
        labelWidth: 120,
        column: [
          {
            label: '水印头像',
            prop: 'imgUrl3',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              res: 'data'
            },
            canvasOption: {
              text: 'avue',
              ratio: 0.1
            },
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/imgupload'
          }
        ]
      }
    }
  }
}
</script>
Expand Copy

# 拖拽排序

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

TIP

2.8.27+

{ "img": [ "/images/logo-bg.jpg", "/images/logo-bg.jpg", "./xx/xx.sql" ] }

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

{{form}}
<avue-form :option="option" v-model="form"> </avue-form>
<script>
export default {
   data(){
     return {
       form:{
          img:['/images/logo-bg.jpg','/images/logo-bg.jpg','./xx/xx.sql']
       },
       option: {
          labelWidth: 120,
          column: [
            {
              label: '数组图片组',
              prop: 'img',
              drag:true,
              dataType: 'array',
              type: 'upload',
              propsHttp: {
                res: 'data.0'
              },
              span: 24,
              listType: 'picture-card',
              tip: '只能上传jpg/png文件，且不超过500kb',
              action: '/imgupload'
            }
          ]
        }
     }
   }
}
</script>
Expand Copy

# 阿里云oss上传

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

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

TIP

1.0.6+

<avue-form :option="option" v-model="form"> </avue-form>
<script>
export default {
   data(){
     return {
       form:{},
       option: {
          labelWidth: 120,
          column: [
            {
              label: '阿里上传',
              prop: 'imgUrl',
              type: 'upload',
              listType: 'picture-img',
              canvasOption: {
                text: 'avue',
                ratio: 0.1
              },
              oss: 'ali',
              loadText: '附件上传中，请稍等',
              span: 24,
              tip: '只能上传jpg/png文件，且不超过500kb',
            }
          ]
        }
     }
   }
}
</script>
Expand Copy

# 七牛云oss上传

<!-- 导入需要的包 （一定要放到index.html中的head标签里） -->
<script src="https://avuejs.com/cdn/CryptoJS.js"></script>
  • 华东——http(s)😕/upload.qiniup.com
  • 华北——http(s)😕/upload-z1.qiniup.com
  • 华南——http(s)😕/upload-z2.qiniup.com
  • 北美——http(s)😕/upload-na0.qiniup.com
  • 东南亚——http(s)😕/upload-as0.qiniup.com
//入口处全局配置七牛云的参数 
Vue.use(window.AVUE, {
  qiniu: {
    AK: '',//七牛云相关密钥
    SK: '',//七牛云相关密钥
    bucket:'https://upload.qiniup.com'//存储地区，默认为华东，其他的如下表
    scope: 'test',//存储空间名称
    url: 'https://cdn.avuejs.com/'//外链的域名地址
  }
})

TIP

1.0.6+

<avue-form :option="option" v-model="form"> </avue-form>
<script>
export default {
   data(){
     return {
       form:{},
       option: {
          labelWidth: 120,
          column: [
            {
              label: '七牛上传',
              prop: 'imgUrl',
              type: 'upload',
              listType: 'picture-img',
              propsHttp: {
                name: 'hash',
                url: "key"
              },
              oss: 'qiniu',
              loadText: '附件上传中，请稍等',
              span: 24,
              tip: '只能上传jpg/png文件，且不超过500kb',
            }
          ]
        }
     }
   }
}
</script>
Expand Copy
Last Updated: 4/25/2022, 9:27:56 AM

← 子表单 →