上傳文件----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 //上傳文件後綴
          				   }