vue如何實現圖片異步上傳？

一、vue-resource 是什么？

​ vue-resource是一個通過XMLHttpRequest或JSONP技術實現異步加載服務端數據的Vue插件

二、 提供了什么方法？

​

三、 如何使用？

1. 安裝 vue-resource 命令: npm install vue-resource

2. 在main.js 中 導入 vue-source 並作為一個組件使用

   import vueResource from 'vue-resource'
   Vue.use(vueResource)
   

3. 如果發送網絡請求 可以使用 this.$http

4. 代碼樣例

   <template>
     <div>
       <input type="file" @change="getFile($event)" />
       <button @click="upload">上傳</button>
       <div>{{ result }}</div>
       <div v-show="uping==1">正在上傳中</div>
       <div v-show="result">
         <video ref="video" controls>您的瀏覽器不支持 video元素。</video>
       </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         upath: "",
         result: "",
         uping: 0,
         baseUrl: "/api/static/upload/"
       };
     },
     methods: {
       upload: function() {
         var formdata = new FormData();
         formdata.append("file", this.upath); //filename是鍵，file是值，就是要傳的文件
         let config = { headers: { "Content-Type": "multipart/form-data" } };
         this.uping = 1;
         this.$http
           .post("/api/app01/uploadmp4/", zipFormData, config)
           .then(function(response) {
             this.uping = 0;
             this.result = response.data;
             //綁定播放地址
             this.$refs.video.src = this.baseUrl + response.data.url;
           });
       },
       getFile: function(event) {
         this.upath = event.target.files[0];
       }
     }
   };
   </script>
   

5. 后端代碼

   def uploadmp4(request):
       if request.method == 'POST':
           item = {}
           file = request.FILES.get('file')
           f = open(os.path.join('static/upload/','',file.name),'wb')
   
           item['message'] = '上傳成功'
           item['url'] = file.name
           item['error'] = 0
           #寫文件 遍歷文件流
           for chunk in file.chunks():
               f.write(chunk)
           return HttpResponse(json.dumps(item,ensure_ascii=False),content_type='application/json')