使用elementUI中的el-upload组件来实现文件上传

http-request：允许使用自定义的方法来处理文件上传的请求。

before-upload：是Element UI的<code><el-upload>组件的一个钩子函数，它在上传文件之前被调用。你可以在这个钩子中进行一些自定义的校验或者操作。例如设置上传文件大小

on-change：on-change 事件在文件状态改变时触发。这里的文件状态通常指上传进度的变化或者上传操作的成功/失败。on-change 事件的处理函数会接收一个参数，该参数是一个对象，包含了文件的相关信息，如 file（文件对象），fileList（文件列表），name（事件名称）等。

<span>

<el-form-item label="文件地址：" prop=""/>code>

</span>

<el-upload

ref="upload"code>

:file-list="formFileUploadForm"code>

:http-request="handleUploadForm"code>

:on-change="handleChange"code>

:before-upload="beforeUpload"code>

:show-file-list="false"code>

:auto-upload="false"code>

class="upload-demo"code>

action=""code>

>

<el-input v-model = 'uploadForm.file' type="primary" readonly styele="width:240px;line-height:0px;padding-right:20px">code>

<el-button size="mediumTwo" type="primary">预览</el-button>code>

</el-upload>

handleUploadForm(params){

const formData = new FormData()

formData.append('file',param.file)

form.append('FileName','')

axios({

url:'',

methods:'post',

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

data:formData

}).then(res=>{

if(res.data.code==200){

return this.$pop(res.data.data,'success',this)

}else{

return this.$pop(res.data.message,'warning',this)

}

}).catch(err=>{

return this.$pop(error,'error',this)

}

})

}

beforeUpload(file) {

console.log('文件上传前的校验', file);

// 这里可以进行一些文件的校验，比如文件类型，文件大小等

// 返回 false 或者返回一个 Promise 对象，Promise 对象 reject 时不会上传文件

return new Promise((resolve, reject) => {

if (file.size / 1024 / 1024 > 2) {

this.$message.error('文件大小不能超过 2MB!');

reject(new Error('文件大小不能超过 2MB!'));

} else {

resolve(file);

}

});

},

handleChange(response, file, fileList) {

if (response.status === 'success') {

console.log('文件上传成功', file);

} else if (response.status === 'error') {

console.log('文件上传失败', file);

}

}