嘿，我想在一个模型中录制音频作为语音注释：
class ShipPhoto(models.Model):
user_name = models.ForeignKey(User, on_delete=models.CASCADE)
photo = models.ImageField()
voice_record = ??????
carplates = models.CharField(max_length=20)
这样，当我打开form_template时，我可以单击语音记录并将记录的消息上载到我的模型中。我已经检查了此链接{{3}}，但是当我使用pip命令安装该链接时，它会自动卸载我当前的django（2.0.8）版本并降级到1.8。还有其他解决方案吗？ ？
================================================ ===================== 更新（10/10）
仍然不确定如何将videojs合并到Django表单中。在下面，您可以看到我的ModelForm，views.py和模板。
ModelForm
class ShipPhotoForm(ModelForm):
class Meta:
model = ShipPhoto
exclude= ('user_name',)
def save_model(self, request, obj, form, change):
if not obj.pk:
obj.user_name = request.user
obj.save()
views.py
class ShipPhotoCreate(LoginRequiredMixin, View):
login_url = '/accounts/login/'
redirect_field_name = 'redirect_to'
form_class = ShipPhotoForm
template_name = 'photo/shipphoto_form.html'
def create_object(self, audio_file):
return self.model.objects.create(**{self.create_field: audio_file})
def get(self, request):
form =self.form_class(None)
return render(request, self.template_name, {'form':form})
def post(self,request):
form = self.form_class(request.POST, request.FILES)
print(form.errors)
if form.is_valid(): # uploader has been excluded. No more error.
photo = form.save(commit=False) # returns unsaved instance
photo.user_name = request.user
photo.save() # real save to DB.
return redirect('photo:main')
return render(request,self.template_name,{})
模板
{% extends "main/base.html" %}
{% block content %}
<br>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<form class="form-horizontal" action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{% include "form_template.html" %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit/上传</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
“ form_template.html”
{% for field in form %}
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span class="text-danger small">{{ field.errors }} </span>
</div>
<label class="control-label col-sm-2">{{ field.label_tag }}</label>
<div class="col-sm-10">{{ field }}</div>
</div>
{% endfor %}
我可以覆盖{{field}}的{{1}}使其与.js插件一起工作吗？我不太确定如何将.js脚本添加到模板中，以便在打开ShipPhotoCreate（View）并单击shiphoto.voice_record字段时会提示我的手机打开语音记录，然后将其保存在数据中基础。
答案 0 :(得分：1)
在型号中
voice_record = models.FileField()
使用一些js插件在客户端录制音频。我个人使用videojs，因为它可以同时处理音频和视频。然后将录制的音频文件发送到服务器并保存。我个人使用ajax，可以使用任何方法。
在视图中：
audio_file = request.FILES.get('audio')
shipphoto_obj = ShipPhoto.objects.get(pk='whatever')
shipphoto_obj.voice_record = audio_file
shipphoto_obj.save()
完整代码：
模板
<link rel="stylesheet" href="{% static 'myapp/videojs-record/dist/css/video-js.min.css' %}" />
<link rel="stylesheet" href="{% static 'myapp/videojs-record/dist/css/videojs.record.min.css' %}" />
<style>
/* change player background color */
#myAudio {
background-color: #9FD6BA;
}
</style>
<body>
<audio id="myAudio" class="video-js vjs-default-skin"></audio>
<button class="audio-btn strt disable-btn" id="submit" disabled>Submit</button>
<span class="upload-comp">Uploading Complete</span>
<!-- Requires a lot of external js, I think I have added them all. -->
<script src="{% static 'myApp/videojs-record/video.min.js' %}"></script>
<script src="{% static 'myApp/videojs-record/RecordRTC.min.js' %}"></script>
<script src="{% static 'myApp/videojs-record/adapter.js' %}"></script>
<script src="{% static 'myApp/wavesurfer/dist/wavesurfer.min.js' %}"></script>
<script src="{% static 'myApp/wavesurfer/dist/plugin/wavesurfer.microphone.min.js' %}"></script>
<script src="{% static 'myApp/videojs-wavesurfer/dist/videojs.wavesurfer.min.js' %}"></script>
<script src="{% static 'myApp/videojs-record/dist/videojs.record.min.js' %}"></script>
<script>
// Handle audio record and upload
$(document).ready(function(){
var player = videojs("myAudio", {
controls: true,
width: 600,
height: 300,
fluid: false,
plugins: {
wavesurfer: {
src: "live",
waveColor: "#36393b",
progressColor: "black",
debug: true,
cursorWidth: 1,
msDisplayMax: 20,
hideScrollbar: true
},
record: {
audio: true,
video: false,
maxLength: 60,
debug: true
}
}
}, function() {
// print version information at startup
var msg = 'Using video.js ' + videojs.VERSION +
' with videojs-record ' + videojs.getPluginVersion('record') +
' + videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
' and recordrtc ' + RecordRTC.version;
videojs.log(msg);
});
// error handling
player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});
player.on('error', function(error) {
console.log('error:', error);
});
// user clicked the record button and started recording
player.on('startRecord', function() {
console.log('started recording!');
});
// user completed recording and stream is available
player.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording: ', player.recordedData);
$('#submit').prop('disabled', false);
$('#submit').removeClass('disable-btn');
});
$('#submit').on('click', function(){
var btn = $(this);
btn.html('Saving...').prop('disabled', true).addClass('disable-btn');
var myFile = new File([player.recordedData], 'audio.webm');
var csrf = $('input[name="csrfmiddlewaretoken"]').val();
var url = "{% url 'myapp:myurl' %}";
var data = new FormData();
data.append('recorded_audio', myFile);
data.append('csrfmiddlewaretoken', csrf);
$.ajax({
url: url,
method: 'post',
data: data,
success: function(data){
if(data.success){
btn.html('Re Submit');
$('.upload-comp').show();
}
else{
btn.html('Error').prop('disabled', false).removeClass('disable-btn');
}
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</body>
观看次数：
class AjaxSaveAudio(View):
"""Use ajax to save audio sent by user."""
def post(self, request):
"""Save recorded audio blob sent by user."""
audio_file = request.FILES.get('recorded_audio')
myObj = MyModel() # Put aurguments to properly according to your model
myObj.voice_record = audio_file
myObj.save()
return JsonResponse({
'success': True,
})