微信小程序与django后端的图片传输、存储与访问
一、小程序传输图片到后端
使用api：wx.chooseMedia (选择本地照片/拍摄照片), wx.uploadFile (上传文件)
wx.chooseMedia:
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html
wx.uploadFile:
https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
1. js文件，添加存放图片本地路径的属性
data: { filePath:"../../../image/blankimg.jpeg" },
2. 选择图片
uploadImg(){ var that = this wx.chooseMedia({ count:1, //一次性上传个数 mediaType:['image'], //image or video or both sizeType:['compressed'], //是否压缩图片 success:(res)=>{ console.log(res.tempFiles) that.setData({ //设置filePath filePath:res.tempFiles[0].tempFilePath }) } }) },
3. 上传图片，使用选择图片时获取的本地路径。文件传输到后端使用字典格式{name: file，name: file}，字典的key值就是在api中设置的'name'。
submit(){
var that = this
var time = util.formatTime(new Date())
var name = time.substring(0,10).replaceAll('/','')+time.substring(11)
wx.uploadFile({
filePath: that.data.filePath, //图片本地路径
name: name, //图片名 作为在后端提取图片文件的key
url: app.globalData.url + 'english/upload_img', // 后端接口
formData:{ // 传输一些需要的数据 name:name, id : res.data.task_id
},
success:(res)=>{ console.log(res) if(res.statusCode==200){ wx.showToast({ title: '创建成功', }) setTimeout(function(){ wx.navigateTo({ url: '../chooseTasker/chooseTasker?task_id='+id, }) },2000) }
} }) }
二、django后端接收图片并存储
1. 设置settings.py，在底部添加以下两行。MEDIA_ROOT是项目中保存上传的文件的根目录，MEDIA_URL是要访问存放文件目录时使用的地址。
MEDIA_ROOT = os.path.join(BASE_DIR, 'img') MEDIA_URL = '/media/'
2. 设置根urls.py。
from django.contrib import admin from django.urls import path, include from django.conf.urls.static import static # 添加本行 from django.conf import settings # 添加本行 urlpatterns = [ path('admin/', admin.site.urls), path('english/',include('pp_english_server.urls')) ]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 将文件路径添加进来
3. models
在django的模型中支持ImageField的存储。一定要记得设置upload_to，这里表示图片将被存放在根目录下的哪一个文件夹中，若没有该文件夹则会自动创建。例如，现在代码中设置的图片存储路径是img/taskimg。
class Task(models.Model): id = models.AutoField(primary_key=True) create_time = models.DateTimeField(null=True) words = models.TextField(validators=[validate_comma_separated_integer_list],max_length=255,null=True) due_date = models.DateField(null=True) creator = models.CharField(max_length=20) title = models.CharField(max_length=255) message = models.CharField(max_length=255, null=True) image = models.ImageField('表情',upload_to="taskimg",null=True) # 使用ImageField upload_to必不可少
4. 迁移模型
每次更改models都要进行迁移
在终端进入项目所在目录，依次执行以下命令
python manage.py makemigrations
python manage.py migrate
5. 接收图片接口，django接收到的文件将是InMemoryUploadedFile格式，此格式可以直接存储到ImageField中。
@api_view(['POST']) def upload_img(request): if request.method == 'POST':print(request.FILES) id = request.data['id'] name = request.data['name'] # 提取文件的key img = request.FILES[name] # 提取文件本身 task = Task.objects.filter(id=id)[0] task.image.save(name,img) # 将文件存储到数据库中 格式：model.column.save(name,file) if Task.objects.filter(id=id)[0].image is not None: return Response('success') return Response()
触发该接口，可以发现图片成功存储在项目根目录下img的taskimg文件夹中
数据库中也存入了图片的名字
三、小程序端使用已上传的图片
1. 后端接口，将图片的根目录访问url和文件名传给前端，用于组合成图片的网络地址
@api_view(['POST']) def get_task_content(request): if request.method == 'POST': task_id = request.data['taskId'] task = Task.objects.filter(id=task_id)[0] res={} res['image']=str(task.image) # 取出存储在数据库中的图片名，转为字符串格式 res['root'] = 'media' # 图片根目录的访问地址 res['words'] = eval(task.words) words = eval(task.words) res['title'] = task.title return Response(res)
2. 在js文件的data中，添加存储图片网络地址的属性
data: { image:"" },
3. 前端请求中，在数据返回后组合成图片的网络地址（服务器地址+图片根目录访问url+图片名称）
onLoad(){
var that = this
wx.request({ url: app.globalData.url + 'english/get_task_content', method:'POST', data:{ taskId : taskId }, success:(res)=>{ console.log(res) that.setData({ title:res.data.title, message:res.data.message, words:res.data.words, image:app.globalData.url + res.data.root + '/' + String(res.data.image) // 组合成图片的网络地址 }) } })
}
4. 在wxml中绑定this.data.image。可以使用mode="widthFix"设置图片宽度固定，图片高度将随图片宽度等比例适应。
<image mode="widthFix" src="{{image}}"></image>
此时已实现微信小程序与django后端之间的图片传输、存储、访问。
