Ok, go ahead. We started designing the head.

So, first of all, we need to know that an avatar image is a file, and it can’t be stored in a database by itself. Our database is basically the file name of the image, so where do we put the image?

We definitely have to create a folder to store it in. If the number of users reached millions or even more, then the general computer is afraid not put, so there is a special server, that is, our company often said the picture server. The stock of picture servers and their dedicated broadband costs are almost one of the biggest costs for Internet companies.

However, we don’t have that many users on our platform, so we don’t have that many avatars, and the authors’ combined users are only a few hundred employees.

So now we start to officially implement this function, note that this step must be remembered, can be bookmarked oh ~

First we create a user_img folder with __init__ under static in MyApp

As for why static, this is the static resource address that the project can currently return directly to the front end. We haven’t set up a custom static resource folder in settings.py yet.

Resources in other directories that we use directly in the page will report an error.

Now let’s go anywhere to get a small picture put in, first to achieve the display effect ~

Then we go to views.py to find the public argument function created in the previous section:

As shown in the image above, add a userIMG value with the suffix for the image name you just created.

Then go to welcome.html and write the call display,

Write the line break and the IMG tag, and the image path is concatenated.

You can set the size of the image, the width of the image, and the ratio of the width of the image. I only set the width here and called two bootstrap3 styles.

Look at the results:

You can play with it for yourself. Let’s go back to refining public parameter functions:

After all, we were all written to death. Not all users can return 1.png. Each user has his /

We have the user ID here to distinguish which image is which.

The current situation is that my user ID is not 1 and the image name is 1.png, so we can’t find it and the front end shows it like this:

I’m not going to do this optimization right now. Although it looks ugly, it belongs to the thinking of the product, which is to make the user feel ugly, and then upload the profile picture ~

Let’s now develop the upload profile picture function:

First write the upload button in the front:

Note that since the native upload button set is not easy to control, I have already written the changes to the details. I put it inside nav, div. Note that the form upload mode is used and the page will be refreshed automatically. All form content is passed through the name tag in the input, and is fetched by name in the background. There’s only one profile file here, which is fileUpload.

You can copy the following code directly in case you make an error.

<form id="upload_file" action="/user_upload/" method="post" enctype="multipart/form-data"> <input type="file" name="fileUpload" style="margin-left: 45px; width: 65px; height: 20px; font-size: xx-small; float: left"/> <button onclick="upload_py()" style="color: black; width: 64px; height: 21px; </button></form>Copy the code

The effect is as follows:

Ok, our route is set to /user_upload/ so now go to urls.py and set it:

Then go to the background and create a user_upload function:

Def user_upload(request): File = request.files. get("fileUpload",None) # if not file = request.files. get("fileUpload",None) New_name = STR (request.user.id) + '.png' # set the name of the new image to destination = Open ("MyApp/static/user_img/"+new_name, 'wb+') # for chunk in file.chunks(): Write (chunk) destination.close() return HttpResponseRedirect('/home/') # HttpResponseRedirect('/home/'Copy the code

After writing, let’s restart the service, refresh the page, and test:

First click select File:

Then it will automatically pop up your folder, select a picture, click on the lower right corner of the open button.

Then the marquee disappears, and click upload picture.

Discovery is immediate success

This time, the avatar folder also appears, my user ID named image:

Finally, we will optimize the display of the select file/upload button, after all, it is ugly

My design is two buttons that are hidden by default. And then there’s a little button, and a click shows these two buttons.

Now let’s return to welcome.html:

Hide the file button group and set the small button:

I use the text pattern of bootstarp3 for the small button. Href click does not jump to the link, but launches a function called show_upload. This function is responsible for displaying the upload image button group.

Let’s refresh the page to see what it looks like:

After the click:

Users can then upload or update their profile pictures

Let’s try another one:

The binary of the function is overwritten, so that our memory will not be wasted.

Well, that’s the end of this video. Take your time