1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 记录Angular2 file-upload 图片上传和文件上传

记录Angular2 file-upload 图片上传和文件上传

时间:2020-03-15 10:01:46

相关推荐

记录Angular2 file-upload 图片上传和文件上传

独角兽企业重金招聘Python工程师标准>>>

html

<input type="file" class="col-md-3" ng2FileSelect name = "file" [uploader]="uploaderImages"(change)="selectedFileSmallOnchanged($event)">//中括号里面的uploader是固定的相当于click

ts

1.引入FileUploaderimport{ FileUploader } from "ng2-file-upload";//如果没有还要执行如下命令进行下载npm install ng2-file-upload方法:创建一个file-up-loader方法public uploaderImages:FileUploader = new FileUploader(url:"接口地址",method:"POST",itemAlias:"file",autoUpload:false })public selectedFileSmallOnchanged(event){this.editorUploadImages();//调用这个方法进行上传}public editorUploadImages():void{let that = this;////增加参数传参过去 是把这个参数加入form表单中添加//可以增加多个参数就用form.append('参数','自己定义的参数')this.uploaderImages.onBuildItemForm = function(fileItem,form){form.append('resourceId',that.mod_resourceId)//这个是自己定义的参数}//uploaderImages要和上面定义的方法名字是一样的 和html input uploader一致this.uploaderImages.queuep[0].onSuccess = function(response,status,headers){if(status == 200){let tempRes = JSON.parse(response)//上传文件后获取服务器返回的数据进行处理 把son字 符串转化为son对象that.mod_new_image=tempRes.data;//声明一个变量接住返回的数据 可以进行赋值 //为什么要在外面声明一个that代替this 现在是只在uploader里面 this就只能指uploaderthat.uploaderImages.clearQueue();//上传成功之后清除上传的文件流保证下一个文件流是新的}else{alert("上传图片失败")}};this.uploaderImages.queue[0].upload//图片进行上传}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。