element上传大文件就报错500_VUE--ElementUI--文件上传(四)

一、文件上传

基本页面

action="http://localhost/goods-service/goods/sku/file"

list-type="picture-card"

:on-success="handleImageSuccess"

:before-upload="beforeImageUpload"

:auto-upload="true"

>

import { fileDelete,fileDownload } from "@/api/goods/fileUpload.js";

import { unescape } from "querystring";

export default {

data() {

return {

fileList: [],

dialogImageUrl: "",

dialogVisible: false,

disabled: false

};

},

methods: {

handleRemove(file) {

// 删除文件

console.log(file.response.data);

let fileNames = file.response.data.split("/");

fileDelete(fileNames[fileNames.length - 1]).then(res => {

if (res.data.code == "0000") {

this.fileList.splice(file, 1);

}

});

},

handlePictureCardPreview(file) {

// 预览文件

this.dialogImageUrl = file.url;

this.dialogVisible = true;

},

handleDownload(file) {

console.log("下载成功");

let fileNames = file.response.data.split("/");

let fileName = fileNames[fileNames.length - 1];

fileDownload(fileName).then(res => {

if (res.data.code == "0000") {

this.downloadFile(fileName,res.data.data);

}

});

},

handleImageSuccess(res, file, fileList) {

// 上传成功

this.fileList = fileList;

console.log("上传成功" + fileList.length);

},

beforeImageUpload(file) {

// 上传前格式与大小校验

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;

},

// 下载

downloadFile(fileName, content) {

let aLink = document.createElement("a");

let blob = this.base64ToBlob(content); //new Blob([content]);

let evt = document.createEvent("HTMLEvents");

evt.initEvent("click", true, true); // initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为

aLink.download = fileName;

aLink.href = URL.createObjectURL(blob);

// aLink.dispatchEvent(evt);

aLink.click();

},

// base64转blob

base64ToBlob(code) {

let parts = code.split(";base64,");

let contentType = parts[0].split(":")[1];

let raw = window.atob(parts[1]);

let rawLength = raw.length;

let uInt8Array = new Uint8Array(rawLength);

for (let i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], { type: contentType });

}

}

};

自定义上传

页面添加:http-reques属性：

action属性必须存在，可以为空值。

action

:http-request="fileUpload"

JS调用：

// 一定要添加file默认参数

fileUpload(file) {

fileUpload(file).then(res => {

console.log(res)

});

}

API调用：

/**

* 自定义上传

* @param {*} fileobj

*/

export function fileUpload(fileobj){

let param = new FormData();

// 上传文件对象 名称file与后台控制器参数要一致

param.append('file',fileobj.file);

return request({

method: 'post',

// 上传地址

url: '/goods-service/goods/sku/file',

// 定义上传头

headers: {'Content-Type':'multipart/form-data'},

data: param

});

}