[ecommerce2] 017 Image Uploads 图片上传

pillow安装

pillow是python image库

>pip install pillow

知识介绍

slug

slug:用于生成一个有意义(valid, meaninful)URL  

参考(http://stackoverflow.com/questions/427102/what-is-a-slug-in-django)

比如:http://stackoverflow.com/questions/427102/what-is-a-slug-in-django  后面的“what-is-a-slug-in-django”就是经过slug后的产物

如何使用:

需要使用slugify功能:

from django.utils.text import slugify

slugify(value) 

If value is "Joel is a slug", the output will be "joel-is-a-slug".

It‘s a way of generating a valid URL, generally using data already obtained. For instance, using the title of an article to generate a URL. I‘d advise to generate the slug, using a function, given a title (or other piece of data), rather than setting it manually.

SlugField

也是起到类似作用,只不过这个一般是后台直接添加时使用,比如:

slug = models.SlugField(unique=True) 

这样在后台就有个slug框,填写后,URL中就包含slug中的内容。

创建ProductImage类

class ProductImage(models.Model):

product = models.ForeignKey(Product)

image = models.ImageField(upload_to=image_upload_to)

def __unicode__(self):

return self.product.title

定义upload_to函数用于处理上传图片的保存,该函数需要接收两个参数instance和filename

upload_to may also be a callable, such as a function. This will be called to obtain the upload path, including the filename. This callable must accept two arguments and return a Unix-style path (with forward slashes) to be passed along to the storage system. The two arguments are:


Argument


Description


instance


An instance of the model where the FileField is defined. More specifically, this is the particular instance where the current file is being attached.

In most cases, this object will not have been saved to the database yet, so if it uses the default AutoFieldit might not yet have a value for its primary key field.


filename


The filename that was originally given to the file. This may or may not be taken into account when determining the final destination path.

入参instance和filename分别为

Product(iPhone Cover) iphone_cover.jpg

其中instance是当前上传图片关联的product对象,filename为上传文件的文件名

Upload_to函数返回文件系统存放路径,一般路径在

MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_in_env", "media_root")

产品子目录可以自定义

from django.utils.text import slugify

def image_upload_to(instance, filename):
	title = instance.product.title
	slug = slugify(title)
	basename, file_extension = filename.split(".")
	new_filename = "%s-%s.%s" %(slug, instance.id, file_extension)
	return "products/%s/%s" %(slug, new_filename)

例子:将iphone_cover.jpg(Product Image)上传给(Product)iPhone Cover

则title, slug, basename, file_extension, new_filename的值分别如下:

iPhone Cover iphone-cover iphone_cover jpg iphone-cover-2.jpg

注意同一文件重复上传的结果,以MP3 Player为例,将mp3_player.jpg上传给Product MP3 Player

如果是第一次创建ProductImage,instance.id为None

MP3 Player mp3-player mp3_player jpg mp3-player-None.jpg

MP3 Player mp3_player.jpg

同样的名字,如果做第二次修改

MP3 Player mp3-player mp3_player jpg mp3-player-3.jpg

MP3 Player mp3_player.jpg

Currently: products/mp3-player/mp3-player-3.jpg 

同样的名字,如果继续覆盖,文件不会被覆盖,而是增加随机数重新拷贝一个

MP3 Player mp3-player mp3_player jpg mp3-player-3.jpg

MP3 Player mp3_player.jpg

Currently: products/mp3-player/mp3-player-3_7KveE47.jpg 

执行migrate

>python manage.py makemigrations
>python manage.py migrate

创建admin接口

from .models import Product,Variation,ProductImage

admin.site.register(ProductImage)

在product_detail_view添加图片显示

下面这两个的显示分别如下

{{ img.image.file }}

{{ img.image.url }}

D:\virtualenv\ecommerce-ws\src\static_in_env\media_root\products\mp3-player\mp3-player-None.jpg

/media/products/mp3-player/mp3-player-None.jpg

MEDIA_URL = ‘/media/‘
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static_in_env", "media_root")

  

时间: 2024-11-07 12:15:32

[ecommerce2] 017 Image Uploads 图片上传的相关文章

Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传

在 ThinkPHP 3.2.3 中集成百度编辑器最新版 Ueditor 1.4.3.1,同时将编辑器自带的上传类替换成 ThinkPHP 3.2.3 中的上传类. ① 下载编辑器(下载地址:http://ueditor.baidu.com/website/download.html),解压后放入项目根目录的 Data 目录并且将解压出来的目录重命名为 ueditor. 项目中的控制器 ./Application/Admin/Controller/BlogController.class.php

ueditor图片上传配置

ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 运行上传图片的action名称 */ "imageFieldName": "upfile", /* 提交的图片表单名称 */ "imageMaxSize": 2048000, /* 上传限制大小,单位B */ "ima

PHP图片上传类

前言 在php开发中,必不可少要用到文件上传,整理封装了一个图片上传的类也还有必要.一.控制器调用 public function upload_file() { if (IS_POST) { if (!empty($_FILES['Filedata'])) { import('Org.Upload', COMMON_PATH); $upload = new \Upload(); // 允许上传文件大小 $upload->allowMaxSize(C('ALLOW_UPLOAD_FILE_MAX

WordPress 中文图片 上传 自动重命名

WordPress 中文图片 上传 自动重命名 由于国人很少有在上传图片前将图片名重命名为英语的,所以自动重命名对于WP来说尤为重要,特别是LINUX的不支持中文名的. WordPress上传多媒体的代码都存放于\wp-admin\includes\里面的file.php,打开这个文件,filename=wpuniquefilename(uploads['path'], file[′name′],unique_filename_callback );// Move the file to the

PHP 图片上传

PHP上传的简单案例: Html文件: <html> <form action="index.php" name="form" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit"

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)

上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库.ok,废话不多说了,直接贴代码吧. 1.前台js代码: $.ajax({ async:false,//是否异步 cache:false,//是否使用缓存 type: "POST", data:{fileData:fi

thinkphp实现UploadFile.class.php图片上传功能

图片上传在网站里是很常用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,下面是实现方法 1.我们首先需要创建一个表 复制代码代码如下: CREATE TABLE IF NOT EXISTS `tp_image` ( `id` int(11) NOT NULL AUTO_INCREMENT, `image` varchar(200) NOT NULL, `create_time

Django配置图片上传

本文首先实现django中上传图片的过程,然后解决富文本编辑器文件上传的问题. 一. 上传图片 1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT 在 D:\blog_project  下建立文件夹 uploads MEDIA_URL = '/uploads/' # 上传图片的路径:D:\blog_project\uploads MEDIA_ROOT = os.path.join(BASE_DIR, 'uploads') # 上传图片的根路径 BASE_DIR:

ueditor 单独图片上传 转载

<body> <script type="text/javascript"> //这个是图片上传的,网上还有附件上传的 (function($) { var image = { editor: null, init: function(editorid, keyid) { var _editor = this.getEditor(editorid); _editor.ready(function() { //设置编辑器不可用 _editor.setDisable