1 前端vue上传 # 拖拽上窜
<template> <div> <input type="file" @change="upload_upyun" /> <div class="upload"> 拖拽上传 </div> </div> </template> <script> export default{ data(){ return{ } }, //监听属性 watch:{ }, //计算属性 computed:{ }, mounted () { let upload = document.querySelector('.upload'); upload.addEventListener('dragenter', this.onDrag, false); upload.addEventListener('dragover', this.onDrag, false); upload.addEventListener('drop', this.onDrop, false); }, //自定义方法 methods:{ onDrag (e) { e.stopPropagation(); e.preventDefault(); }, onDrop (e) { e.stopPropagation(); e.preventDefault(); this.upload_upyun(e.dataTransfer.files); }, //上传又拍云 upload_upyun:function(files){ //获取文件对象 //let file = e.target.files[0]; let file = files[0]; //声明参数 let param = new FormData(); param.append('file',file); const config = { headers: { 'Content-Type': 'multipart/form-data' } } this.axios.post(this.$setting.base_url+'uploadfile/', param, config)// 上传图片 .then(function(response) { console.log(response) }); }
2 django 上传又拍云
class UploadFile_text(View): def post(self, request): img = request.FILES.get('file') print(request) print(img.name,'测试文件长传') up = upyun.UpYun('zsjsnyy', username='zsjsnyy', password='CZHBpEL4XLJPDLy9jDD5CeAPYnYrDLlg') headers = {'x-gmkerl-rotate': 'auto'} for chunk in img.chunks(): res = up.put(img.name, chunk, checksum=True, headers=headers) print(res) # 返回结果 return HttpResponse(json.dumps({'filename': img.name}), content_type='application/json') # return HttpResponse(json.dumps({'msg':"ok"}), content_type='application/json')