VUE框架+element 文件上传

:before-upload表示在文件进行上传之间对文件进行的操作，可以对文件类型，大小进行限制、 

accept表示选择文件时的默认类型限制，只是一个默认方式，用户可以修改，需要进行校验

<el-upload
 // 文件上传前的钩子，可以在这个钩子函数里判断上传的图片的类型和大小是否达标
    :before-upload="beforeAlbumUpload" 
     // 接受的图片类型
        accept=".jpg, .jpeg, .png, .gif"  
    //上传成功的回调函数
    :on-success="handleAlbumSuccess"
    :on-change="uploadChange"
    :show-file-list="false"
    action="#"
    class="avatar-uploader"
    name="file">


    <img :src="imageUrl" alt="专辑图片" class="avatar" v-if="imageUrl">

</el-upload>

//文件上传前的钩子
beforeAlbumUpload(file: any) {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
    this.$message.error('上传图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
    this.$message.error('上传图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
},


  // 上传文件
    uploadChange(file, fileList) {
    // 获取预览信息
      const formData = new FormData();
       //文件
      formData.append("file",file.raw);
      //文件名
      formData.append("fileName",file.name);

      //向后端发送请求    （请求成功后新页面打开阅读）
      uploadFileSofd(formData).then((res) => {
            consloe.log('上传成功')
      
      });
    },

// 导入/上传文件
export function uploadFileSofd(data) {
  return request({
    url: `${context}/manager/uploadFileStream`,
    method: "post",
    data,
//请求头，必写
    headers: {
      'Content-Type': 'multipart/form-data'
    },
  });
}