最近在做一个项目,在网上看过很多关于upload组件文章,今天我就总结下自己运用upload组件的心得。
最有力的说明就是代码了,上代码
1.运用iview upload组件上传文件(带token,带参数)
<div class="upload-item">
<Upload
ref="upload"
:before-upload="handleUpload"
:max-size="10240"
:on-exceeded-size="handleSizeError"
:format="['xlsx','xlx']"
:on-format-error="handleFormatError"
:show-upload-list="true"
:on-progress="progress"
:on-success="handleUploadSuccess"
:on-error="handleUploadFail"
:data="getUserData"
:action="uploadUrl">
<Button icon="ios-cloud-upload-outline">选择上传文件</Button>
</Upload>
<div v-if="file !== null">上传文件: {
{ file.name }} <Button type="text" @click="upload" :loading="loadingStatus">{
{ loadingStatus ? 'Uploading' : 'Click to upload' }}</Button></div>
</div>export default {
data () {
return {
uploadUrl:config.apiPath + '/order/import',
getUserData: { userInfo: localRead('userInfo'), 'token': getAccessToken() }, //当前用户信息&token
}
},
modalCancel () {
this.showTemplate = false;
this.$refs.upload.clearFiles();
},
handleUpload (file) {
this.$refs.upload.clearFiles()
},
handleUploadSuccess (response, file, fileList) {
if(response.status == 200 && response.data.status != 422){
} else {
this.$Message.success(file.name + '导入成功')
this.getData(this.pageNum, this.pageSize, this.formSearch)
}
},
handleUploadFail (error, file, fileList) {
this.$Message.error(file.name + '导入失败,请检查文件')
},
handleFormatError (file, fileList) {
this.$Message.error(file.name + '文件格式错误,必须是xls或者xlsx')
},
handleSizeError (file, fileList) {
this.$Message.error(file.name + '文件太大,不能超过10M')
},
}
laravel 接口代码大致如下:
public function import(Request $request)
{
$data = $request->post();
if(!isset($data['userInfo'])) {
return $this->exceptionOut('用户信息获取失败');
}
$userInfo = $this->getUser($data);
if(!isset($userInfo['uid']) || !isset($userInfo['uname']) ) {
return $this->exceptionOut('用户信息获取失败');
}
$file = $request->file('file');
if(is_null($file) || !$file->isValid()){
return $this->exceptionOut('文件上传失败');
}
$mimeType = $file->getClientMimeType();
if (!in_array($mimeType, array('application/vnd.ms-excel', 'application/x-msexecl','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-office','application/zip','application/octet-stream'))){
return $this->exceptionOut('上传文件类型错误');
}
if(!in_array($file->getClientOriginalExtension(), ['xlsx','xlx'])){
return $this->exceptionOut("文件类型必须是:'xlsx','xlx'");
}
// 3.判断大小是否符合 3M
$tmpFilePath = $file->getRealPath();//临时文件 "/tmp/phpMKWbae"
$sizeLimit = 3;
if (filesize($tmpFilePath) >= $sizeLimit * 1024 * 1024) {
return $this->exceptionOut("'文件大小应小于{$sizeLimit}M'");
}
$excelParse = new ExcelParse($tmpFilePath);
$orderExcelParse = new OrderExcelParse();
$datas = [];
$error = [];
$datas = $orderExcelParse->parse($excelParse, 387);
if($orderExcelParse->getErrMsg()){
$this->exceptionOut(implode(';', $orderExcelParse->getErrMsg()));
}
try{
if(Order::import($datas, $userInfo)){
return $this->response([], '操作成功');
}else{
return $this->exceptionOut("操作失败");
}
} catch (\Exception $ex) {
$this->exceptionOut($ex->getMessage());
}
}
当然了,token校验放在Middleware做处理,也做相应的跨域处理即可
以上就是前端的上传代码了,后台通过解密token后,处理数据返回结果给前端,效果如下: