上传附件----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+SupId" ></q-uploader> 
 //此处的附件上传是需要点击上传按钮的
				<q-uploader 
                  ref="attachmentUploader"
                  name="files"
                  auto-expand   //选择后自动展开
                  hide-upload-button //隐藏上传按钮,使用自动上传
                  @add="$refs['attachmentUploader'].upload()" //添加附件之后触发uploaded函数
                  @uploaded="attachmentUploaded"  //点击上传按钮之后触发
                  :headers="{'Accept': 'application/json;charset=utf-8'}"
                  :url="uploadUrls+SupId" ></q-uploader>
                  

	data:function(){
	 	return{
	 		 SupId:'',
	 		 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 
				  multiple="multiple"
                  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 res = JSON.parse(xhr.response)
            this.techCount++
            if (res.success) {
              this.$q.notify({
                message: '上传成功!',
                type: 'positive',
                icon: 'done',
                timeout: 1000,
                position: 'top-right'
              })
              for (var i=0;i<this.techCount;i++) {
                var _obj = {}
                _obj.sysFileName = res.sysFileName
                _obj.sysFileType = res.suffix
                _obj.fileUrl = res.path
                _obj.userFileName = res.name
                _obj.userFileType = res.suffix 
                this.vendorFileLists.push(_obj)
              }
              for(var i=0; i<this.vendorFileLists.length; i++){
                for(var j=i+1; j<this.vendorFileLists.length; j++){
                  if(this.vendorFileLists[i].sysFileName == this.vendorFileLists[j].sysFileName){  
                    this.vendorFileLists.splice(j,1)
                    j--
                  }
                }
              }
            } else {
              this.$q.notify({
                message: res.msg,
                type: 'negative',
                icon: 'error_outline',
                timeout: 5000,
                position: 'top-right'
              })
            }
          }
                  

4,自动上传和非自动上传

1), 包含上传按钮,非自动上传

               <q-uploader 
                 ref="techUploaders"
                 color="secondary" 
                 name="files"
                 auto-expand
                 @uploaded="techUploadeds"
                 :headers="{'Accept': 'application/json;charset=utf-8'}"
                 :url="fileUrls"></q-uploader>

2), 自动上传

				<q-uploader 
                  ref="FileUploader"
                  name="files"
                  @add="$refs['FileUploader'].upload()"
                  @uploaded="fileUploaded"
                  auto-expand
                  hide-upload-button
                  :headers="{'Accept': 'application/json;charset=utf-8'}"
                  :url="uploadUrl+'MPLATE'" ></q-uploader>
                  

5,附件上传之后的重置状态

(在弹窗中,当附件上传之后会有"文件残留",需要重置其状态),如下图

 this.$refs['FileUploader'].reset()     //FileUploader指的是q-uploader这个DOM元素
 this.$v.editFrom.$reset()              //类似的必填变量重置状态
 //当然不要忘记对存储该附件的变量也进行清空