Upload附件上传

Form 的上传列使用 type: 'upload'。绑定值、响应映射和回调的完整说明见 Upload 组件 API。

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

提示

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

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

类型

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue'

const action = 'https://api.avuejs.com/imgupload'

const form = ref({
  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'
  ],
})

const option = ref({
  column: [
    {
      label: '附件上传',
      prop: 'imgUrl',
      type: 'upload',
      multiple: true,
      span: 24,
      propsHttp: {
        url: 'url',
        name: 'name',
        res: 'data'
      },
      action
    },
    {
      label: '视频',
      prop: 'video',
      type: 'upload',
      propsHttp: {
        res: 'data',
        url: 'url',
        name: 'name',
        home: 'https://www.w3school.com.cn'
      },
      listType: 'picture-img',
      span: 24,
      action
    },
    {
      label: '照片墙',
      prop: 'imgUrl',
      listType: 'picture-card',
      type: 'upload',
      span: 24,
      action
    },
    {
      label: '缩略图上传',
      prop: 'imgUrl',
      type: 'upload',
      span: 24,
      listType: 'picture',
      action
    },
    {
      label: '拖拽上传',
      prop: 'imgUrl',
      type: 'upload',
      span: 24,
      dragFile: true,
      action
    },
  ]
})
</script>

数据类型

提示

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 setup>
import { ref } from 'vue';

const form = ref({
  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"}]'
});

const option = ref({
  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>

上传前和上传后方法

顶层函数 prop 使用 :upload-before="uploadBefore"、:upload-after="uploadAfter"；也可直接写在列配置的 uploadBefore、uploadAfter 中，列上的回调优先。

回调	参数	继续或终止
uploadBefore	(file, done, stop, column)	done(newFile?) 继续上传；stop(error?) 取消当前文件
uploadAfter	(res, done, stop, column)	done(data?) 保存上传结果；stop(error?) 放弃当前结果

res 已按 propsHttp.res 提取。第三个参数是停止回调，不能当成 loading 布尔值。异步逻辑应在成功、失败、取消的每条分支调用 done 或 stop，否则当前流程不会结束。设置 httpRequest 会接管整个上传过程，此时不会再自动执行默认请求、大小校验、before/after 或更新绑定值。

效果预览可直接操作下方示例

选择一张小于 1 MB 的 PNG/JPG 图片，观察“上传前 / 上传后”日志与绑定数组。本例使用页面内模拟接口和临时图片地址，不向外部服务发送文件；刷新页面后临时地址失效。

正在加载示例…

<template>
  <avue-form :option="option" v-model="form" :upload-before="uploadBefore" :upload-after="uploadAfter" />
  <pre>{{ JSON.stringify({ files: form.files, events }, null, 2) }}</pre>
</template>

<script setup>
import { onBeforeUnmount, ref } from 'vue';
import { useDictionaryMock } from '../_shared/useDictionaryMock';
const form = ref({ files: [] });
const events = ref([]);
const urls = [];
const { baseUrl } = useDictionaryMock(({ query }) => {
  const file = query.get('file');
  const url = URL.createObjectURL(file);
  urls.push(url);
  return { data: { name: file.name, url } };
});
const option = {
  menuBtn: false,
  column: [{ label: '附件', prop: 'files', type: 'upload', span: 24, listType: 'picture-card',
    accept: 'image/png,image/jpeg', fileSize: 1024, limit: 3,
    propsHttp: { res: 'data' }, action: baseUrl + '/upload' }],
};
function uploadBefore(file, done, stop, column) {
  if (!file.size) {
    events.value.unshift({ stage: '取消', reason: '空文件' });
    stop('空文件');
    return;
  }
  events.value.unshift({ stage: '上传前', name: file.name, prop: column.prop });
  done(); // 若需替换文件，传 done(new File(...))
}
function uploadAfter(res, done, stop, column) {
  events.value.unshift({ stage: '上传后', name: res.name, prop: column.prop });
  done(); // 也可传 done(newData)，格式需匹配 propsHttp.url/name
}
onBeforeUnmount(() => urls.forEach((url) => URL.revokeObjectURL(url)));
</script>

本地模拟接口代码见 示例辅助文件。接入业务时将 action 换成自己的接口，并移除模拟代码；本页其他接口与 OSS 示例需要对应服务可用。

自定义预览方法

效果预览可直接操作下方示例

配置uploadPreview预览回调方法

正在加载示例…

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

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus';

const form = ref({
  imgUrl: [
    "/images/logo-bg.jpg",
    'https://www.w3school.com.cn/i/movie.ogg'
  ]
});

const option = ref({
  column: [
    {
      label: '附件上传',
      prop: 'imgUrl',
      type: 'upload',
      listType: 'picture-card',
      span: 24,
      propsHttp: {
        res: 'data'
      },
      action: 'https://api.avuejs.com/imgupload'
    }
  ]
});

// 方法定义
function uploadPreview (file, column, done) {
  ElMessageBox.confirm('是否放大查看图片', '确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    done();
  }).catch(() => {
    // 用户取消操作时的处理逻辑，如果需要的话
  });
}
</script>

自定义删除方法

uploadDelete(file, column) 需要返回 Promise：resolve 后删除，reject 时保留。第二个参数是列配置，不能当成文件列表；不要只返回普通 boolean。

效果预览可直接操作下方示例

配置 uploadDelete 删除回调函数

正在加载示例…

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

<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const form = ref({
  imgUrl3: ['/images/logo-bg.jpg'],
})

const option = ref({
  column: [
    {
      label: '水印头像',
      prop: 'imgUrl3',
      type: 'upload',
      listType: 'picture-card',
      span: 24,
      propsHttp: {
        res: 'data'
      },
      action: 'https://api.avuejs.com/imgupload'
    }
  ]
})

const uploadDelete = (file, column) => {
  console.log(file, column)
  return ElMessageBox.confirm('这里是自定义的，是否确定移除该选项？', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
}
</script>

指定文件类型

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue'

const form = ref({
  imgUrl3: 'https://www.runoob.com/try/demo_source/circle1.svg'
})

const 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 setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  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 设置文件选择器的类型提示，业务格式校验可放在 uploadBefore 中。limit 限制文件数量，fileSize 以 KB 为单位，例如 10240 表示 10 MB。

超出大小时调用 uploadSized(fileSize, file, fileList, column)，模板属性名为 upload-sized，末尾有 d。超出数量调用 uploadExceed(limit, files, fileList, column)。

效果预览可直接操作下方示例

配置 accept、limit、fileSize，并通过 upload-sized 接收大小限制回调

正在加载示例…

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

<script setup>
import { ref } from 'vue'

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

const uploadSize = (fileSize, file, fileList, column) => {
  console.log(fileSize, file, fileList, column)
}
</script>

超出上传限制回调

效果预览可直接操作下方示例

uploadExceed文件超出上传限制回调

正在加载示例…

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

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref({
  imgUrl: ['/images/logo-bg.jpg']
})

const option = {
  column: [
    {
      label: '附件上传',
      prop: 'imgUrl',
      type: 'upload',
      listType: 'picture-card',
      limit: 1,
      span: 24,
      propsHttp: {
        res: 'data'
      },
      action: 'https://api.avuejs.com/imgupload'
    }
  ]
}

const uploadExceed = (limit, files, fileList, column) => {
  ElMessage.error('超出上传限制文件数量')
  console.log(limit, files, fileList, column)
}
</script>

上传失败错误回调函数

uploadError(error, column) 接收请求错误或停止原因；大小、数量超限分别传入 size、exceed。accept 本身不会生成格式错误回调。

效果预览可直接操作下方示例

配置 uploadError 接收上传失败原因

正在加载示例…

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

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const form = ref({});

const option = ref({
  labelWidth: 120,
  column: [
    {
      label: '附件上传',
      prop: 'imgUrl',
      type: 'upload',
      listType: 'picture-card',
      span: 24,
      propsHttp: {
        res: 'data'
      },
      action: 'https://api.avuejs.com/imgupload'
    }
  ]
});

const uploadError = (error, column) => {
  ElMessage.error('上传失败回调');
  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 setup>
import { ref } from 'vue';

const form = ref({
  img: ['/images/logo-bg.jpg', 'https://www.w3school.com.cn/i/movie.ogg'],
});
const option = ref({
  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 setup>
import { ref } from 'vue'

const form = ref({})

const option = ref({
  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.net/Sortable/1.10.0-rc2/Sortable.min.js"></script>

效果预览可直接操作下方示例

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

正在加载示例…

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

<script setup>
import { ref } from 'vue';

const form = ref({
  img: ['/images/logo-bg.jpg', '/images/logo-bg.jpg', './xx/xx.sql']
});

const option = ref({
  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.net/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 setup>
import { ref } from 'vue'

const form = ref({})
const option = ref({
  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 setup>
import { ref } from 'vue';

const form = ref({});
const option = ref({
  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>

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

效果预览可直接操作下方示例

正在加载示例…

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

<script setup>
import { ref } from 'vue'

const form = ref({})

const option = ref({
  column: [
    {
      label: '腾讯上传',
      prop: 'imgUrl',
      type: 'upload',
      listType: 'picture-img',
      fileType: 'img',
      oss: 'cos',
      span: 24
    }
  ]
})
</script>