Estoy trabajando en un proyecto recientemente y he leído muchos artículos sobre componentes de carga en Internet. Hoy resumiré mi propia experiencia en el uso de componentes de carga.
La explicación más poderosa es el código, en el código.
1. Utilice el componente de carga de iview para cargar archivos (con token y parámetros)
<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')
},
}El código de la interfaz de laravel es aproximadamente el siguiente:
importación de función pública (Solicitar $ solicitud)
{
$ datos = $ solicitud-> publicación ();
if (! isset ($ data ['userInfo'])) { return $ this-> exceptionOut ('Falló la adquisición de información del usuario'); }
$ userInfo = $ this-> getUser ($ data);
if (! isset ($ userInfo ['uid']) ||! isset ($ userInfo ['uname'])) { return $ this-> exceptionOut ('Usuario Falló la adquisición de información '); }
$ file = $ request-> file ('file');
if (is_null ($ file) ||! $ file-> isValid ()) { return $ this-> exceptionOut ('Error al cargar el archivo'); } $ mimeType = $ archivo-> getClientMimeType (); if (! in_array ($ mimeType, array ('aplicación / vnd.ms-excel', 'aplicación / x-msexecl', 'aplicación / vnd.openxmlformats-officedocument.spreadsheetml.sheet' , 'application / vnd.ms-office', 'application / zip', 'application / octet-stream'))) { return $ this-> exceptionOut ('Upload file type error'); } if (! in_array ($ file-> getClientOriginalExtension (), ['xlsx', 'xlx'])) { return $ this-> exceptionOut ("El tipo de archivo debe ser: 'xlsx ',' xlx '"); } // 3. Determine si el tamaño cumple con 3M
$ tmpFilePath = $ file-> getRealPath (); // 临时 文件 "/ tmp / phpMKWbae"
$ sizeLimit = 3;
if (($ tmpFilePath)> = $ sizeLimit * 1024 * 1024) { return $ this-> exceptionOut ("'文件 大小 应 小于 {$ sizeLimit} M'"); } $ excelParse = new ExcelParse ($ tmpFilePath); $ orderExcelParse = new OrderExcelParse (); $ datos = []; $ error = []; $ datos = $ 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 ()); } }
Por supuesto, la verificación del token se coloca en Middleware para su procesamiento, y se puede realizar el procesamiento entre dominios correspondiente.
Lo anterior es el código de carga de la interfaz. Una vez que el fondo descifra el token, los datos se procesan y el resultado se devuelve a la interfaz. El efecto es el siguiente:
