小视频-上传视频

Posted 2021-11-27 chengdongzi

 

为什么做小视频？

快手，抖音，小红书都是我们熟知的小视频。小视频的诞生 可以获取更多的流量。

 

.py

class Upload_img(APIView):

#kindeditor上传方法

def post(self,request):

item = {}

file = request.FILES.get(‘file‘)

orderno = datetime.datetime.now()

orderno = str(orderno).replace(‘-‘,‘‘).replace(‘ ‘,‘‘).replace(‘:‘,‘‘).replace(‘.‘,‘‘)

file1 = orderno+file.name

file_name = request.POST.get(‘name‘,‘未获取到参数‘)

print(file_name)

f = open(os.path.join(UPLOAD_ROOT,‘‘,file1),‘wb‘)

item[‘message‘] = ‘上传成功‘

item[‘url‘] = ‘/upload/‘+ file1

item[‘error‘] = 0

rideo = News(name=file1,firstvideo_url=item[‘url‘])

rideo.save()

#写文件 遍历文件流

for chunk in file.chunks():

f.write(chunk)

return HttpResponse(json.dumps(item,ensure_ascii=False),content_type=‘application/json‘)

 

 

 

 

 

.vue

 

<li>

<label>上传视频</label>

<center>

<input type="file" @change="getFile($event)" /><button @click="upload">上传</button>

</center>

<div>{{ result }}</div>

<div v-show="uping==1">正在上传中</div>

</li>

 

 

<script>

import d2 from ‘./d2.vue‘

//导入jquery

import $ from ‘jquery‘

export default {

data () {

return {

msg: "这是一个变量",

dataList:[],

clicked:0,

upath: ‘‘,

result: ‘‘,

uping:0

}

},

components: {

‘v-header‘: d2

},

mounted:function(){

let test = $(‘#test‘).html();

console.log(test);

//绑定父类盒子

$("#my_box").on("click",".newBtn",this.my_click_two);

},

methods:{

upload: function () {

var name = this.username;

// alert(name);

//进行初始化传参 let局部变量

          let param = new URLSearchParams();

          //将参数传递给对象

param.append(‘name‘,name);

var zipFormData = new FormData();

zipFormData.append(‘file‘, this.upath);

//filename是键，file是值，就是要传的文件

let config = { headers: { ‘Content-Type‘: ‘multipart/form-data‘ } };

this.uping = 1;

this.$http.post(‘http://localhost:8000/bash_admin_user/uploadmp4‘, zipFormData,config).then(function (response) {

console.log(response);

console.log(response.data);

this.uping = 0;

this.result = response.data;

//绑定播放地址

this.$refs.video.src = response.data.url;

});

},

getFile: function (even) {

this.upath = event.target.files[0];

},

}

}

</script>