上传文件 上传图片

 

auto-upload

是否自动上传文件

show-file-list

是否显示已上传文件列表

有了这个就不需要写接口 将文件传到后端 不是通过axios发送文件了

action

请求 URL

  :file-list="fileList" 当状态改变触发on-change文件信息就会在fileList

file-list / v-model:file-list

默认上传文件

on-change

文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

<el-upload

                     :auto-upload="false"

                     :show-file-list="false"

                     accept=".xlsx, .xls"

                     action="/import/student"

                    :file-list="fileList"

                    :on-change="onChange"

                    :on-success='successFn'

                    ref="uploadRef"

                >                

               <el-button type="primary" v-if="!fileName">选择文件</el-button>

              <el-button type="primary" v-else @click.prevent.stop="submitFile">导入文件</el-button>

           </el-upload>

const fileList = ref([]);

const submitFile=()=>{

  uploadRef.value.submit()//触发外部方法 手动上传文件

}

---------------------------------------------------------------------------------------------------------------------------------

  <el-form-item label="更换封面" prop="file">

              <!-- limit 允许上传数量 auto-upload是否自动上传-->

              <el-upload

                v-model:file-list="coverInfo.file"

                :auto-upload="false"

                :limit="1"

                accept=".png,.jpg"

              >

                <el-button type="primary">选择图片</el-button>

                <template #tip>

                  建议: 课程封面大小建议上传1125*633,不超过5M,格式为.jpg,.png

                </template>

              </el-upload>

            </el-form-item>

 <el-button type="primary" @click="submitQuit">确定</el-button>

const submitQuit = () => {

    // 提交封面信息 通过rules验证

    coverFormRef.value.validate(async (value) => {

      if (value) {

        let formData = new FormData();

        let coverInfoValue = coverInfo.value;

        // 有要传的图片地址时候 （flie有值）

        if (coverInfoValue.file.length) {

          // 下面的append就是将文件类型的数据与普通类型进行结合

          // 有文件类型需要手动提交 这里是图片需要formdata就是将表单数据进行整理 整理到可以让那个后端解析的程度

          //                                       文件信息

          formData.append("file", coverInfoValue.file[0].raw);

        }

        formData.append("description", coverInfoValue.description);

        formData.append("courseName", props.course.courseName);

        const { data } = await reviseCover(formData);//reviseCover是接口 将要改变的文件发给后端

        if (!data.code) {

          // 成功

          ElMessage.success(data.txt);

          isDrawer.value = false;

          activeName.value = "first";

          emit("change");

        } else {

          ElMessage.error(data.txt);

        }

      }

    });

  }

};