el-upload上传文件,如何使用action、auto-upload

1点击打开自动上传

没有

:auto-upload="false"就是自动上传

2点击上传按钮上传

不自动上传:auto-upload="false"

el-upload上传文件,如何使用action、auto-upload_第1张图片


        
          
          
拖拽到此或点击上传

对话框相关

el-dialog

:model-value="dialogVisible" 绑定对话框的是否打开
:before-close="cancelUpload" 点击×关闭对话框事件

上传相关

el-upload

action="接口地址"  绑定接口地址
:auto-upload="false" 不自动上传
:file-list="fileList"  这个list的显示

ref="upload"  实现后面点击上传用的

ps记得定义元素 后面省略

 const state = reactive({
        fileList: [],
        dialogVisible: false,
        upload: '',

      function cancelUpload() {
        state.dialogVisible = false;
        state.fileList = [];
        getbookList();
      }
function handleRemove(file, fileList) {
  console.log(file, fileList);
}
function handlePreview(file) {
  console.log(file);
}
function submitUpload(e, file, fileList) {
  state.upload.submit(); //将文件上传
  ElMessage({
    message: '上传成功',
    type: 'success',
    duration: '1000',
  });
}

你可能感兴趣的:(前端,vue.js,javascript)