上传文件----q-uploader

上传文件----q-uploader

一,用到的技术:Vue + Quasar

1,文件上传这种组件在很多UI框架里都有,今天写的主要是在Quasar框架下上传组件 :

属性	说明
url	用来处理上传的服务器的URL或路径
name	文件名称，如果它应该不同于文件本来的名称
headers	指定需要将哪些头部信息添加到XHR请求
hide-upload-progress	隐藏上传进度。当您需要一些其他方式向用户发送上传进度信号时很有用
auto-expand	在将某些文件添加到队列中时自动展开文件列表
clearable	如果设置为“true”，则该组件向用户提供可操作的图标以移除当前选择

2, 此处是单上传, :url绑定的是上传的路径加上该路径需要上传的id(attachmentSupId)

				 <q-uploader 
                  ref="attachmentUploader"
                  name="file"
                  @uploaded="attachmentUploaded"
                  :headers="{'Accept': 'application/json;charset=utf-8'}"
                  :url="uploadUrl+attachmentSupId" ></q-uploader>
                  

	data:function(){
	 	return{
	 		 attachmentSupId:'',
	 		 uploadUrl:baseURL+'路径...'
	 	}
	 }

	attachmentUploaded: function(file, xhr) {
			            var res = JSON.parse(xhr.response)
			            this.fileCount++
			            if (res.success) {
			              this.$q.notify({
			                message: '上传成功',
			                type: 'positive',
			                icon: 'done',
			                timeout: 1000,
			                position: 'top-right'
			              })
			              this.attachmentForm.attachmentId = res.data
			              console.log(res.data)
			              if (this.fileCount>1) {
			                var cNode = document.getElementsByClassName('q-uploader-files')[0]
			                cNode.removeChild(cNode.childNodes[0])
			              }
			              var that = this
			              that.attachmentModal = false
			              that.listGet({
			                pagination: that.serverPagination
			              })
			            } else {
			              this.$q.notify({
			                message: res.msg,
			                type: 'negative',
			                icon: 'error_outline',
			                timeout: 3000,
			                position: 'top-right'
			              })
			            }
			          }

3,此处是批量上传(多上传)

				 <q-uploader 
                  ref="fileChange"
                  color="secondary" 
                  name="files"
                  auto-expand
                  hide-upload-button
                  @add="$refs['fileChange'].upload()"
                  @uploaded="fileChangeUploaded" 
                  :headers="{'Accept': 'application/json;charset=utf-8'}"
                  stack-label="变更文件" 
                  :url="uploadUrl" ></q-uploader>
                  

		fileChangeUploaded: function(file, xhr) {
				            var _fileRes = JSON.parse(xhr.response)
				            this.editForm.sysFileNamex = _fileRes.sysFileName //生成的文件名称
				            this.editForm.sysFileTypex = _fileRes.suffix //上传文件后缀
				            this.editForm.fileUrlx = _fileRes.path //上传文件路径
				            this.editForm.userFileNamex = _fileRes.name //上传文件名称
				            this.editForm.userFileTypex = _fileRes.suffix //上传文件后缀
          				   }