前端通过ajax上传多张图片

<input type="file" id="photos" oninput="add_photos()" multiple="multiple" accept="image/*"/>

add_photos()对应ajax函数，用来传递给后端

image/* 表示图片的格式，*表示接收所有格式的图片

    // 上传图片函数
    function add_photos() {
        // 新建一个变量用来接收图片文件
        var formData = new FormData();
        // 通过遍历将所有图片添加到上面新建的变量中
        // #photos  用的是jquery来获取有id为photos属性的值
        for (var i = 0; i < $("#photos")[0].files.length; i++) {
            formData.append("photos", $("#photos")[0].files[i]);
        }
        $.ajax({
            // 添加到后台的路由
            "url": "{% url 'add_photos' %}",
            "data": formData,
            "dataType": "json",
            "type": "post",
            processData: false,
            contentType: false,
            success: function (data) {
                if (data.code == 1001) {
                    window.alert(上传成功);
                }
            }
        });
    }                

然后在后端通过路由指向的视图函数来接收ajax传递过来的文件

我这里以Django为例

在路由文件urls.py中添加：

path('add_photos/', views.add_photos, name='add_photos'),

在视图函数views.py中添加：

def add_photos(request):
    """
    添加照片
    :param request:
    :return:
    """
　　# 接收前端传递过来的图片文件
    photos = request.FILES.getlist('photos')
    for i in range(length):
        photo = photos=[i]
　　　　　# 获取图片的名字
        photo_name = photo.name
　　　　　# 如果本地没有该图片文件夹，则新建
        if not os.path.exists(
                settings.MEDIA_ROOT + '/' + photo_name):
            os.makedirs(settings.MEDIA_ROOT + '/' photo_name)
        photo_path = os.path.join(
            settings.MEDIA_ROOT + '/' + photo_name, img_name)
　　　　　# 设置图片的存储路径
        save_path = '/' + photo_name
        with open(photo_path, 'ab') as fp:
            for chunk in photo.chunks():
                fp.write(chunk)
　　　　　# 将图片路径存入到服务器数据库中
        models.Photos.objects.get_or_create(image_name=img_name,image=save_path)
　　　　　# 上传到阿里云的云存储中，因为是公司自己用，所以用的是简便方法，这部分内容根据具体需求开发
        bucket.put_object_from_file(
            "media/" + photo_name, img_path)
        fp.close()
    return_msg = {
        "code": 1001,
        "msg": "上传照片成功！"
    }
    return JsonResponse(return_msg)