vue一次上传多个文件

Vue一次发送给后台多个文件，其实很简单:

在data里定义一个变量，然后给该变量赋值 new FormData();

然后就可以使用append()方法往里面添加添加数据了。

1
2
3
4
5
6
7

<script>
export default {
  data () {
    return {
        form_data: new FormData()
    }
</script>

就这样，就定义好了一个随时可以添加内容的formdata，太方便了。

顺便写上js根据id取得文件的方法:

1

var fire = document.getElementById('your_id').files[0]

通过这样的方法取得的文件，查看文件名需使用 fire.name 。也可以使用console.log(fire)来查看它的其它属性。

发送文件我这里使用的axios，需要安装:

1

npm install axios --save

然后是我使用axios的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13

// 给formdata添加内容
this.form_data.append('name', this.good_name);
this.form_data.append('price', this.price);
this.form_data.append('params', params);
this.form_data.append('cid', this.default_category);
// 这里我的axios已经在main.js中注册了，所以可以使用，若是没有在mian.js中注册，需要在script标签下使用import axios from "axios", url是要提交到的地址，method中可以选择提交方式，如get, post等，data是提交的内容。之后的.then(res=>{})是提交后接到响应执行的内容，可以不写。
this.axios({
            url: 'http://127.0.0.1:8000/insert_goods/',
            method: 'post',
            data: this.form_data
          }).then(res => {
            this.$Message(res.data.message)
          })

然后下面是我Django接收参数的代码:

1
2
3
4
5
6
7
8
9
10

# 添加商品
class InsertGoods(APIView):
    def post(self, request):
        # 接收参数
        name = request.POST.get('name', None)
        price = request.POST.get('price', None)
        params = request.POST.get('params', None)
        cid = request.POST.get('cid', None)
        video = request.FILES.get('video', None)
        return Response({'code': 200, 'msg': params})

这里用的是restframework里的APIView和Response，若是没有使用restframework则在APIView的地方使用django.views.View，在Response那里使用django.http.JsonResponse。这里的name = request.POST.get(‘name’, None)的含义是:从post请求中得到name参数，并将其赋值给变量name，若是没有name参数，那么便给name一个默认的值，该值为None。video = request.FILES.get(‘video’, None)的意思是: 从请求中得到一个叫做video的文件(注意，这里使用的是request.FILES.get()，是用来接收文件的)，并将其赋值给一个叫做video的变量，若是没有得到文件，便默认给video一个默认值，该默认值为None。

可能有的朋友有点疑惑，为什么要给默认值None？这个要视应用场景而定。另外说一下这里默认值None的作用，只需要一段代码我想大家就会明白:

1
2
3
4
5
6

noe = None
if noe:
    print("It's not null")
else:
    print("It's null")

输出结果为It’s null 。这样就明白了吧！默认给None可以方便判断(其实也是因为手懒不想写 == )。

本篇完结~(总感觉写的一点用也没有呢)