分片上传：
setting.py
#图片上传
MEDIA_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/static/media/'
view.py
class Upload(APIView):
def post(self, request):
data = {}
data['code']=200
chunk = request.data['chunkNumber']
upload_file=request.data['file']
identifier = request.data['identifier']
file_name='%s%s' % (identifier,chunk)
with open('static/media/'+file_name,'wb') as tem_file:
for buf in upload_file.chunks():
tem_file.write(buf)
return Response(data)
class Join_file(APIView):
def post(self,request):
print(request.data)
chunk=1
with open('static/media/'+request.data['filename'],'wb') as tar_file:
while True:
try:
filename = 'static/media/'+request.data['uniquefile']+str(chunk)
tem_file=open(filename,'rb')
tar_file.write(tem_file.read())
tem_file.close()
except IOError:
break
chunk+=1
os.remove(filename)
return Response({'data':200})
urls.py
from django.urls import path
from . import views
urlpatterns = [
path('upload/', views.Upload.as_view(), name='upload'),
path('join_file/', views.Join_file.as_view(), name='join_file'),
]
vue
<template>
<uploader :options="options" class="uploader-example" @file-success="fileSuccess">
<uploader-unsupport></uploader-unsupport>
<uploader-drop>
<p>Drop files here to upload or</p>
<uploader-btn v-on:finish="fileSuccess">select files</uploader-btn>
<uploader-btn :attrs="attrs">select images</uploader-btn>
<uploader-btn :directory="true">select folder</uploader-btn>
</uploader-drop>
<uploader-list></uploader-list>
</uploader>
</template>
<script>
import axios from 'axios'
export default {
name:'Upload',
data () {
return {
options: {
// https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js
target: this.$api+'api/user/upload/',
testChunks: false,
chunkSize: '2048000'
},
attrs: {
accept: 'image/*'
},
}
},
methods: {
fileSuccess(rootFile, file, message,chunk){
console.log(rootFile, file, message,chunk)
if(JSON.parse(message).code==200){
console.log('ok')
let form = new FormData()
form.append('filename',rootFile.name)
form.append('uniquefile',rootFile.uniqueIdentifier)
axios({
url:this.$api+'api/user/join_file/',
method:'post',
data:form
}).then((res)=>{
console.log(res.data)
})
}
},
progress(e){
console.log(e)
}
}
}
</script>
<style>
.uploader-example {
width: 880px;
padding: 15px;
margin: 40px auto 0;
font-size: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
margin-right: 4px;
}
.uploader-example .uploader-list {
max-height: 440px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
</style>
