Django+vue上传文件并返回文件在服务器中的路径

vue

用了element ui的el-upload组件

1.HTML代码

<!--index.vue-->
<el-upload
              class="upload-demo"
              :action="uploadZip()"
              :on-success="getFilePath"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">请上传项目文件或者压缩包</div>
</el-upload>

action属性是个字符串，内容是后端处理上传文件的接口
on-success是在文件上传成功后自动调用的，这里主要是用于获取文件上传后在服务器中的路径

2.script代码
下面的this.$server需要在main.js中定义，是我们服务器的基地址和端口，比如：

Vue.prototype.$server = 'http://127.0.0.1:8000/'

然后就是两个函数的实现

//index.vue
getFilePath(response){
        console.log(this.$server+response.path)
      },
uploadZip(){
        return this.$server+'upload_problemZip/'
},

Django

先看一眼项目结构：

1.项目名文件夹下面的urls.py文件（djangoProject1/urls.py）：

urlpatterns = [
    path('upload_problemZip/', views.upload_problem_zip),  # 需要加入这行
]

2.应用文件夹下的models.py（problem/models.py）:

class SaveProblemZip(models.Model):
    create_time = models.DateTimeField(u"上传时间")
    file_url = models.FileField(upload_to='ProblemZip')

3.problem/views.py:

# 上传problem表单文件中的文件
def upload_problem_zip(request):
    data = request.FILES.get('file')
    print('-'*10, type(data))
    create_time = timezone.now().strftime("%Y-%m-%d %H:%M:%S")
    SaveProblemZip.objects.create(create_time=create_time, file_url=data)
    print("666666666666,path=", data)
    return render_json({"path": "ProblemZip/"+str(data)})

这个render_json是个自定义函数，如下：

# 相当于定义了一个HttpResponse返回对象，这样vue中的函数（在这个例子中是getFilePath）才可以接受后端返回的数据
def render_json(data, status=200):
    return HttpResponse(json.dumps(data), content_type="text/json", status=status)

应该没什么问题了，有问题欢迎评论区提问