VUE框架+element 文件上传

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

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




    专辑图片

//文件上传前的钩子
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'
    },
  });
}

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