Vue之txt文件上传功能

Vue之文件上传功能

需求：智能中医项目需要涉及一个数据上传功能，上传一个txt文件

格式：以表单形式上交给后端同学，Id读取表格行内id即可

展示如下：

界面实现：

<el-dialog
	title="离线串口文件上传"
	:visible.sync="dialogUploadSerialPortFile"
	>
	<el-form
		ref="offlineForm"
        :model="offlineForm"
        label-width="100px"
        enctype="multipart/form-data"
	>
		<el-form-item 
                      label="当前患者Id"
                      >
			<el-input 
                      v-model="offlineForm.patientId" 
                      disabled 
                      />
		</el-form-item>
                <el-form-item 
                      label="当前问诊Id"
                      >
			<el-input 
                      v-model="offlineForm.diagnosisId" 
                      disabled 
                      />
		</el-form-item>
		<el-form-item 
                      label="上传文件"
                      >
            <!--action不填但是必须有-->
	    <el-upload
            	ref="upload"
            	class="upload-demo"
            	style="text-align: center;"
            	action=""
            	:headers="headers"
            	multiple
            	drag
            	accept=".txt"
            	:on-remove="onRemove"
            	:on-exceed="handleExceed"
            	:on-change="getFile"
            	:limit="1"
            	:auto-upload="false"
            	:file-list="fileList"
			>
            	<i class="el-icon-upload" />
            	<div 
                     class="el-upload__text"
                     >
                    将文件拖到此处，或<em>点击上传</em>
                </div>
            	<div 
                     slot="tip" 
                     class="el-upload__tip"
                     >
                    请上传txt文件，目前仅支持单个文件上传哦！
                </div>
			</el-upload>
		</el-form-item>
	</el-form>
	<div 
         slot="footer" 
         class="dialog-footer"
         >
		<el-button 
                   @click="dialogUploadSerialPortFile =false"
                   >取消
        </el-button>
        <el-button 
                   type="primary" 
                   @click="submitSerialPortFile"
                   >确定
        </el-button>
	</div>
</el-dialog>

data数据

// 离线数据所需的id
offlineForm: {
  patientId: undefined,
  diagnosisId: undefined
},
// 文件列表
fileList: [],
// 上传（文件所需格式）
headers: { 'Content-Type': 'multipart/form-data' }

功能实现：

// 上传离线串口文件，打开窗口
uploadSerialPortFile(row) {
    // 文件置空
	this.fileList = []
	this.dialogUploadSerialPortFile = true
	this.offlineForm.patientId = this.patientId
    this.offlineForm.diagnosisId = row.id
},
// 改变时的操作
getFile(file, fileList) {
	this.fileList = fileList
},
// 超限
handleExceed(files, fileList) {
	this.$message.warning('目前只能上传一个文件')
},
// 移除
onRemove(file, fileList) {
	this.$message.success('已成功移除该文件')
},
// 提交离线串口文件
submitSerialPortFile() {
	if (this.fileList.length <= 0) {
		this.$message.error('至少上传一个文件！')
	}
    // 定义FormData格式，通过append添加
	const formData = new FormData()
    // 根据后端需要的参数
	formData.append('file', this.fileList[0].raw) // 由于文件略大需要处理，加.raw
	formData.append('patientId', this.offlineForm.patientId)
    formData.append('diagnosisId', this.offlineForm.diagnosisId)
    // 打印查看的格式
	// console.log(formData.get('patientId'))
	// console.log(formData.get('diagnosisId'))
	// console.log(formData.get('file'))
	uploadOfflineData(formData).then(() => {
		this.dialogUploadSerialPortFile = false
        this.$notify({
			title: '成功',
			message: '上传离线数据成功',
			type: 'success',
			duration: 2000
		})
	})
}